@modernpoacher/cogs 0.1.256 → 1.0.0

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

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

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

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

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

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

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

@@ -1,24 +1,37 @@
 /**
- * Description component
+ *  @typedef {CogsTypes.Super.Components.Description.DescriptionProps} DescriptionProps
+ */
+
+/**
+ *  Description component
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import TextContent from '#cogs/components/common/text-content'
 
+/**
+ *  @extends {Component<DescriptionProps>}
+ */
 export default class Description extends Component {
   getClassName () {
     return 'description'
   }
 
-  shouldComponentUpdate (props, state) {
+  /**
+   *  @param {DescriptionProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
     return (
       (props.description !== this.props.description)
     )
   }
 
   render () {
-    const { description } = this.props
+    const {
+      description
+    } = this.props
 
     if (description) {
       return (

package/src/js/super/components/error-message/index.cjs

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

package/src/js/super/components/error-message/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#cogs/super/components/error-message'
+export * from '#cogs/super/components/error-message'

package/src/js/super/components/error-message/index.d.mts

@@ -0,0 +1,27 @@
+declare module '#cogs/super/components/error-message' {
+  import React from 'react'
+
+  export type ErrorMessageProps = CogsTypes.Super.Components.ErrorMessage.ErrorMessageProps
+  export type ErrorMessageState = CogsTypes.Super.Components.ErrorMessage.ErrorMessageState
+
+  export default class ErrorMessage extends React.Component<ErrorMessageProps, ErrorMessageState> {
+    static propTypes: object
+
+    hasTextContent (): boolean
+
+    getTextContent (): string
+
+    getClassName (): string
+
+    static getDerivedStateFromProps (props: ErrorMessageProps, state: ErrorMessageState): ErrorMessageState
+
+    shouldComponentUpdate (props: ErrorMessageProps, state: ErrorMessageState): boolean
+
+    renderTextContent (): React.JSX.Element | null
+  }
+}
+
+declare module '@modernpoacher/cogs/super/components/error-message' {
+  export { default } from '#cogs/super/components/error-message'
+  export * from '#cogs/super/components/error-message'
+}

package/src/{components → js/super/components}/error-message/index.jsx

@@ -1,5 +1,4 @@
 /**
- *  @typedef {CogsTypes.ErrorDefinitionType} ErrorDefinitionType
  *  @typedef {CogsTypes.Super.Components.ErrorMessage.ErrorMessageProps} ErrorMessageProps
  *  @typedef {CogsTypes.Super.Components.ErrorMessage.ErrorMessageState} ErrorMessageState
  */
@@ -26,22 +25,26 @@ export default class ErrorMessage extends Component {
   }
 
   /**
-   *  Compare current and latest `props` for changes to `errorMessage`
+   *  Compare current and latest `state` for changes to `errorMessage`
    *
-   *  @param {{errorMessage?: string}} props   Latest props
+   *  @param {ErrorMessageProps} props   Latest props
    *  @returns {boolean}
    */
-  shouldComponentUpdate (props, state) {
+  shouldComponentUpdate (props) {
     return (props.errorMessage !== this.props.errorMessage)
   }
 
   render () {
-    const { errorMessage } = this.props
+    const {
+      errorMessage
+    } = this.props
 
     if (errorMessage) {
       return (
         <span className={this.getClassName()}>
-          <TextContent textContent={errorMessage} />
+          <TextContent
+            textContent={errorMessage}
+          />
         </span>
       )
     }
@@ -51,5 +54,9 @@ export default class ErrorMessage extends Component {
 }
 
 ErrorMessage.propTypes = {
-  errorMessage: PropTypes.string
+  errorMessage: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    params: PropTypes.shape({}).isRequired,
+    uri: PropTypes.string.isRequired
+  })
 }

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

@@ -0,0 +1,20 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!shinkansen|@modernpoacher)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/cogs/super/components/field')
+
+log('`cogs` 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 '#cogs/super/components/field'
+export * from '#cogs/super/components/field'

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

@@ -0,0 +1,23 @@
+declare module '#cogs/super/components/field' {
+  import React from 'react'
+  import type {
+    ChangeEvent
+  } from 'react'
+
+  export type FieldProps = CogsTypes.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/cogs/super/components/field' {
+  export { default } from '#cogs/super/components/field'
+  export * from '#cogs/super/components/field'
+}

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

@@ -1,22 +1,50 @@
 /**
- * Field component
+ *  @typedef {CogsTypes.OnEventType} OnEventType
+ *  @typedef {CogsTypes.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 '#cogs/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,69 +100,8 @@ Field.propTypes = {
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   fieldRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
+    current: PropTypes.shape({
+      value: PropTypes.string
+    })
   })
 }
-
-/**
- * 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
-}
-
-/**
- * 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
-}

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

@@ -0,0 +1,32 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!shinkansen|@modernpoacher)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/cogs/super/components')
+
+log('`cogs` is awake')
+
+const {
+  default: Description
+} = require('./description/index.jsx')
+
+const {
+  default: ErrorMessage
+} = require('./error-message/index.jsx')
+
+const {
+  default: Field
+} = require('./field/index.jsx')
+
+const {
+  default: Title
+} = require('./title/index.jsx')
+
+module.exports.Description = Description
+module.exports.ErrorMessage = ErrorMessage
+module.exports.Field = Field
+module.exports.Title = Title

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

@@ -0,0 +1,4 @@
+export { default as Description } from '#cogs/super/components/description'
+export { default as ErrorMessage } from '#cogs/super/components/error-message'
+export { default as Field } from '#cogs/super/components/field'
+export { default as Title } from '#cogs/super/components/title'

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

@@ -0,0 +1,4 @@
+export { default as Description } from '#cogs/super/components/description'
+export { default as ErrorMessage } from '#cogs/super/components/error-message'
+export { default as Field } from '#cogs/super/components/field'
+export { default as Title } from '#cogs/super/components/title'

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

@@ -0,0 +1,10 @@
+import debug from 'debug'
+
+const log = debug('@modernpoacher/cogs/super/components')
+
+log('`cogs` is awake')
+
+export { default as Description } from './description/index.cjs'
+export { default as ErrorMessage } from './error-message/index.cjs'
+export { default as Field } from './field/index.cjs'
+export { default as Title } from './title/index.cjs'

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

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

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

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

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

@@ -0,0 +1,32 @@
+declare module '#cogs/super/components/title' {
+  import React from 'react'
+
+  export type TitleProps = CogsTypes.Super.Components.Title.TitleProps
+
+  export default class Title<P extends TitleProps> extends React.Component<P> {
+    static propTypes: object
+
+    isRequired (): boolean
+
+    isDisabled (): boolean
+
+    isReadOnly (): boolean
+
+    getClassName (): string
+
+    shouldComponentUpdate (props: TitleProps): boolean
+
+    renderTextContent (textContent: string): React.JSX.Element
+
+    renderIsRequired (): React.JSX.Element | null
+
+    renderIsDisabled (): React.JSX.Element | null
+
+    renderIsReadOnly (): React.JSX.Element | null
+  }
+}
+
+declare module '@modernpoacher/cogs/super/components/title' {
+  export { default } from '#cogs/super/components/title'
+  export * from '#cogs/super/components/title'
+}

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

@@ -1,5 +1,9 @@
 /**
- * Title component
+ *  @typedef {CogsTypes.Super.Components.Title.TitleProps} TitleProps
+ */
+
+/**
+ *  Title component
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
@@ -9,6 +13,9 @@ import Required from '#cogs/components/common/required'
 import Disabled from '#cogs/components/common/disabled'
 import ReadOnly from '#cogs/components/common/readonly'
 
+/**
+ *  @extends {Component<TitleProps>}
+ */
 export default class Title extends Component {
   isRequired () {
     const {
@@ -38,7 +45,11 @@ export default class Title extends Component {
     return 'title'
   }
 
-  shouldComponentUpdate (props, state) {
+  /**
+   *  @param {TitleProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
     return (
       (props.id !== this.props.id) ||
       (props.title !== this.props.title) ||
@@ -49,6 +60,18 @@ export default class Title extends Component {
     )
   }
 
+  /**
+   *  @param {string} textContent
+   *  @returns {React.JSX.Element}
+   */
+  renderTextContent (textContent) {
+    return (
+      <TextContent
+        textContent={textContent}
+      />
+    )
+  }
+
   renderIsRequired () {
     if (this.isRequired()) {
       return (
@@ -80,14 +103,18 @@ export default class Title extends Component {
   }
 
   render () {
-    const { title } = this.props
-
-    if (title) {
-      const { id } = this.props
+    const {
+      id,
+      title
+    } = this.props
 
+    if (id && title) {
       return (
         <label htmlFor={id} className={this.getClassName()}>
-          <TextContent textContent={title} />
+          {this.renderTextContent(title)}
+          {this.renderIsRequired()}
+          {this.renderIsDisabled()}
+          {this.renderIsReadOnly()}
         </label>
       )
     }

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/_cogs.scss

@@ -0,0 +1,62 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@use "cogs/radio";
+@use "cogs/checkbox";
+@use "cogs/disabled";
+@use "cogs/error";
+
+@mixin cogs {
+  padding: 0;
+  margin: 1rem 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  line-height: 1.375rem;
+
+  &.radio {
+    @include radio.cog-radio;
+  }
+
+  &.checkbox {
+    @include checkbox.cog-checkbox;
+  }
+
+  &.disabled {
+    @include disabled.cog-disabled;
+  }
+
+  &.error {
+    @include error.cog-error;
+  }
+
+  .description {
+    @include typography.secondary-text;
+
+    & /* stylelint-disable-line no-duplicate-selectors */ {
+      display: block;
+      padding: 0;
+      margin: 0 0 0.25rem 0;
+    }
+  }
+
+  .error-message {
+    @include typography.error-standard;
+
+    & /* stylelint-disable-line no-duplicate-selectors */ {
+      display: block;
+      padding: 0;
+      margin: 0 0 0.25rem 0;
+    }
+  }
+}
+
+%cogs {
+  @include cogs;
+}