@modernpoacher/gremlins 0.0.311 → 1.0.0

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

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

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

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

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

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

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

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

package/src/{gremlins → js/gremlins}/fieldset/group/index.cjs

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

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

package/src/js/gremlins/fieldset/group/index.d.mts

@@ -0,0 +1,12 @@
+declare module '#gremlins/gremlins/fieldset/group' {
+  import Group from '#gremlins/super/components/group'
+
+  export type FieldsetProps = GremlinsTypes.Gremlins.Fieldset.FieldsetProps
+
+  export default class FieldsetGroup<P extends FieldsetProps> extends Group<P> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/fieldset/group' {
+  export { default } from '#gremlins/gremlins/fieldset/group'
+  export * from '#gremlins/gremlins/fieldset/group'
+}

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

@@ -0,0 +1,19 @@
+/**
+ *  @typedef {GremlinsTypes.Components.Group.GroupProps} GroupProps
+ *  @typedef {GremlinsTypes.Components.Group.FieldsetProps} FieldsetProps
+ */
+
+/**
+ *  FieldsetGroup component
+ */
+import classnames from 'classnames'
+import Group from '#gremlins/components/group'
+
+/**
+ *  @extends {Group<GroupProps & FieldsetProps>}
+ */
+export default class FieldsetGroup extends Group {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+declare module '#gremlins/gremlins/fieldset' {
+  import {
+    GroupGremlin
+  } from '#gremlins/super/gremlins'
+
+  export type FieldsetProps = GremlinsTypes.Gremlins.Fieldset.FieldsetProps
+
+  export default class FieldsetGroupGremlin<P extends FieldsetProps> extends GroupGremlin<P> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/fieldset' {
+  export { default } from '#gremlins/gremlins/fieldset'
+  export * from '#gremlins/gremlins/fieldset'
+}

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

@@ -0,0 +1,37 @@
+/**
+ *  @typedef {GremlinsTypes.Super.Gremlins.GroupGremlinProps} GroupGremlinProps
+ *  @typedef {GremlinsTypes.Gremlins.Fieldset.FieldsetProps} FieldsetProps
+ */
+
+/**
+ *  FieldsetGremlin component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  GroupGremlin
+} from '#gremlins/super/gremlins'
+
+import Group from '#gremlins/gremlins/fieldset/group'
+
+/**
+ *  @extends {GroupGremlin<GroupGremlinProps & FieldsetProps>}
+ */
+export default class FieldsetGremlin extends GroupGremlin {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+
+  renderGroup () {
+    const {
+      children
+    } = this.props
+
+    return (
+      <Group>
+        {children}
+      </Group>
+    )
+  }
+}

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

@@ -10,7 +10,12 @@ const log = debug('@modernpoacher/gremlins/gremlins')
 
 log('`gremlins` is awake')
 
-/**
- *  Has default export, etc
- */
-module.exports = require('./index.jsx')
+const {
+  ValueGremlin,
+  CheckGremlin,
+  toInputValue
+} = require('./index.jsx')
+
+module.exports.ValueGremlin = ValueGremlin
+module.exports.CheckGremlin = CheckGremlin
+module.exports.toInputValue = toInputValue

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

@@ -0,0 +1,5 @@
+export {
+  ValueGremlin,
+  CheckGremlin,
+  toInputValue
+} from '#gremlins/gremlins'

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

@@ -0,0 +1,27 @@
+declare module '#gremlins/gremlins' {
+  import {
+    FieldGremlin
+  } from '#gremlins/super/gremlins'
+
+  export type FieldGremlinProps = GremlinsTypes.Super.Gremlins.FieldGremlinProps
+  export type ValueProps = GremlinsTypes.Gremlins.ValueProps
+  export type CheckProps = GremlinsTypes.Gremlins.CheckProps
+
+  export class ValueGremlin<P extends ValueProps> extends FieldGremlin<P> {
+    shouldComponentUpdate (props: ValueProps): boolean
+  }
+
+  export class CheckGremlin<P extends CheckProps> extends FieldGremlin<P> {
+    shouldComponentUpdate (props: CheckProps): boolean
+  }
+
+  export function toInputValue (value: unknown): string
+}
+
+declare module '@modernpoacher/gremlins/gremlins' {
+  export {
+    ValueGremlin,
+    CheckGremlin,
+    toInputValue
+  } from '#gremlins/gremlins'
+}

package/src/js/gremlins/index.jsx

@@ -0,0 +1,162 @@
+/**
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Super.Gremlins.FieldGremlinProps} FieldGremlinProps
+ *  @typedef {GremlinsTypes.Gremlins.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Gremlins.CheckProps} CheckProps
+ */
+
+/**
+ *  ValueGremlin component
+ *  CheckGremlin component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  FieldGremlin
+} from '#gremlins/super/gremlins'
+
+import {
+  ValueField,
+  CheckField,
+  toInputValue
+} from '#gremlins/components/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
+
+export {
+  toInputValue
+}
+
+/**
+ *  @extends {FieldGremlin<FieldGremlinProps & ValueProps>}
+ */
+export class ValueGremlin extends FieldGremlin {
+  /**
+   *  @param {ValueProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    const {
+      value,
+      defaultValue,
+      ...superProps
+    } = props
+
+    return (
+      (value !== this.props.value) ||
+      (defaultValue !== this.props.defaultValue) ||
+      super.shouldComponentUpdate(superProps)
+    )
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      value,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_EVENT,
+      fieldRef
+    } = this.props
+
+    return (
+      <ValueField
+        name={name}
+        id={id}
+        value={value}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+}
+
+ValueGremlin.propTypes = {
+  ...FieldGremlin.propTypes,
+  defaultValue: PropTypes.string
+}
+
+/**
+ *  @extends {FieldGremlin<FieldGremlinProps & CheckProps>}
+ */
+export class CheckGremlin extends FieldGremlin {
+  /**
+   *  @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)
+    )
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      value,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_EVENT,
+      onClick = DEFAULT_HANDLE_EVENT,
+      fieldRef
+    } = this.props
+
+    return (
+      <CheckField
+        name={name}
+        id={id}
+        value={value}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        onClick={onClick}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+}
+
+CheckGremlin.propTypes = {
+  ...FieldGremlin.propTypes,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  onClick: PropTypes.func
+}

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

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

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

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

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

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

@@ -1,12 +1,23 @@
 /**
- * NumberField component
+ *  @typedef {CogsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {CogsTypes.Components.Field.Number.NumberProps} NumberProps
+ */
+
+/**
+ *  NumberField component
  */
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { ValueField } from '#gremlins/components/field'
+import {
+  ValueField,
+  toInputValue
+} from '#gremlins/components/field'
 
+/**
+ *  @extends {ValueField<ValueProps & NumberProps>}
+ */
 export default class NumberField extends ValueField {
   getClassName () {
     return classnames(super.getClassName(), 'number')
@@ -14,9 +25,8 @@ export default class NumberField extends ValueField {
 
   render () {
     const {
-      id,
       name,
-      value,
+      id,
       defaultValue,
       required = false,
       disabled = false,
@@ -29,12 +39,35 @@ export default class NumberField extends ValueField {
 
     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='number'
+          ref={fieldRef}
+        />
+      )
+    }
+
     return (
       <input
-        id={id}
         name={name}
-        value={value}
-        defaultValue={defaultValue}
+        id={id}
+        defaultValue={String(defaultValue)}
         required={required}
         disabled={disabled}
         readOnly={readOnly}

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

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

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

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

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

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

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

@@ -1,26 +1,43 @@
 /**
- * NumberGremlin component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Gremlins.Number.NumberProps} NumberProps
+ */
+
+/**
+ *  NumberGremlin 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 '#gremlins/gremlins/number/field'
 
-import Field from './field/index.jsx'
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {ValueGremlin<ValueProps & NumberProps>}
+ */
 export default class NumberGremlin extends ValueGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'number')
   }
 
+  /**
+   *  @param {string | string[]} [value]
+   */
   handleChange = (value) => {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE
+      onChange = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onChange(value)
@@ -44,8 +61,8 @@ export default class NumberGremlin extends ValueGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         defaultValue={defaultValue}
         required={required}

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

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

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

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

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