@modernpoacher/gremlins 0.0.311 → 1.0.1

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

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

@@ -0,0 +1,176 @@
+/**
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Super.Gremlins.FieldGremlinProps} FieldGremlinProps
+ *  @typedef {GremlinsTypes.Super.Gremlins.GroupGremlinProps} GroupGremlinProps
+ */
+
+/**
+ *  FieldGremlin component
+ *  GroupGremlin component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Field from '#gremlins/super/components/field'
+import Group from '#gremlins/super/components/group'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
+
+export class FieldGremlin extends Component {
+  getClassName () {
+    const {
+      required = false,
+      disabled = false,
+      readOnly = false
+    } = this.props
+
+    return classnames('gremlin', { required, disabled, readOnly })
+  }
+
+  getId () {
+    const {
+      id,
+      name
+    } = this.props
+
+    return id || name
+  }
+
+  /**
+   *  @param {FieldGremlinProps} 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) ||
+      (props.tabIndex !== this.props.tabIndex) ||
+      (props.accessKey !== this.props.accessKey) ||
+      (props.placeholder !== this.props.placeholder) ||
+      (props.onChange !== this.props.onChange)
+    )
+  }
+
+  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 (
+      <Field
+        name={name}
+        id={id}
+        value={value}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderField()}
+      </div>
+    )
+  }
+}
+
+FieldGremlin.propTypes = {
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  accessKey: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldRef: PropTypes.shape({
+    current: PropTypes.shape({
+      value: PropTypes.string
+    })
+  })
+}
+
+export class GroupGremlin extends Component {
+  getClassName () {
+    return 'gremlin'
+  }
+
+  /**
+   *  @param {GroupGremlinProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.children !== this.props.children)
+    )
+  }
+
+  renderGroup () {
+    const {
+      groupRef,
+      children
+    } = this.props
+
+    return (
+      <Group
+        groupRef={groupRef}>
+        {children}
+      </Group>
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderGroup()}
+      </div>
+    )
+  }
+}
+
+GroupGremlin.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape({})
+  })
+}

package/src/sass/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "no-descending-specificity": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ]
+  }
+}

package/src/sass/_gremlins.scss

@@ -0,0 +1,59 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@use "gremlins/radio";
+@use "gremlins/checkbox";
+@use "gremlins/disabled";
+@use "gremlins/error";
+
+@mixin gremlins {
+  padding: 0;
+  margin: 1rem 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  line-height: 1.375rem;
+
+  &.radio {
+    @include radio.gremlin-radio;
+  }
+
+  &.checkbox {
+    @include checkbox.gremlin-checkbox;
+  }
+
+  &.disabled {
+    @include disabled.gremlin-disabled;
+  }
+
+  &.error {
+    @include error.gremlin-error;
+  }
+
+  &.fieldset {
+    legend {
+      @include typography.heading-m;
+
+      & /* stylelint-disable-line no-duplicate-selectors */ {
+        padding: 0;
+        margin-top: 0;
+      }
+    }
+
+    &.error {
+      @include error.gremlin-error;
+
+      padding-left: 1rem;
+    }
+  }
+}
+
+%gremlins {
+  @include gremlins;
+}