shinkansen-sprockets 1.1.462 → 1.2.0

package/src/components/error-message/index.jsx

@@ -1,7 +1,12 @@
 /**
- * ErrorMessage component
+ *  @typedef {SprocketsTypes.ErrorDefinitionType} ErrorDefinitionType
+ *  @typedef {SprocketsTypes.Components.ErrorMessage.ErrorMessageProps} ErrorMessageProps
+ *  @typedef {SprocketsTypes.Components.ErrorMessage.ErrorMessageState} ErrorMessageState
  */
 
+/**
+ * ErrorMessage component
+ */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import equal from 'fast-deep-equal'
@@ -11,12 +16,15 @@ import transform from '#sprockets/transformers/error-message'
 import TextContent from '#sprockets/components/common/text-content'
 
 export default class ErrorMessage extends Component {
-  state = {
-    errorMessage: {}
-  }
+  /**
+   *  @type {ErrorMessageState}
+   */
+  state = {}
 
   hasTextContent () {
-    const { errorMessage } = this.props
+    const {
+      errorMessage
+    } = this.props
 
     const {
       text
@@ -26,7 +34,10 @@ export default class ErrorMessage extends Component {
   }
 
   getTextContent () {
-    const { errorMessage } = this.props
+    const {
+      errorMessage
+    } = this.props
+
     const {
       text
     } = transform(errorMessage)
@@ -41,9 +52,9 @@ export default class ErrorMessage extends Component {
   /**
    *  Merge latest `props` to `state`
    *
-   *  @param {{errorMessage?: SprocketsTypes.ErrorDefinitionType}} props   Latest props
-   *  @param {{errorMessage?: SprocketsTypes.ErrorDefinitionType}} state   Latest state
-   *  @returns {{errorMessage: SprocketsTypes.ErrorDefinitionType | void}}
+   *  @param {ErrorMessageProps} props   Latest props
+   *  @param {ErrorMessageState} state   Current state
+   *  @returns {ErrorMessageState}
    */
   static getDerivedStateFromProps ({ errorMessage }, { errorMessage: E }) {
     return {
@@ -54,8 +65,8 @@ export default class ErrorMessage extends Component {
   /**
    *  Compare current and latest `state` for changes to `errorMessage`
    *
-   *  @param {{errorMessage?: SprocketsTypes.ErrorDefinitionType}} props   Latest props
-   *  @param {{errorMessage?: SprocketsTypes.ErrorDefinitionType}} state   Latest state
+   *  @param {ErrorMessageProps} props   Latest props
+   *  @param {ErrorMessageState} state   Latest state
    *  @returns {boolean}
    */
   shouldComponentUpdate (props, state) {
@@ -67,7 +78,7 @@ export default class ErrorMessage extends Component {
       errorMessage: E
     } = this.state
 
-    return (e !== E)
+    return !equal(E, e)
   }
 
   renderTextContent () {
@@ -75,7 +86,9 @@ export default class ErrorMessage extends Component {
       const textContent = this.getTextContent()
 
       return (
-        <TextContent textContent={textContent} />
+        <TextContent
+          textContent={textContent}
+        />
       )
     }
 
@@ -83,7 +96,9 @@ export default class ErrorMessage extends Component {
   }
 
   render () {
-    const { errorMessage } = this.props
+    const {
+      errorMessage
+    } = this.props
 
     if (errorMessage) {
       return (
@@ -100,7 +115,7 @@ export default class ErrorMessage extends Component {
 ErrorMessage.propTypes = {
   errorMessage: PropTypes.shape({
     type: PropTypes.string.isRequired,
-    params: PropTypes.shape().isRequired,
+    params: PropTypes.shape({}).isRequired,
     uri: PropTypes.string.isRequired
   })
 }

package/src/components/group/index.cjs

@@ -11,7 +11,7 @@ const log = debug('shinkansen-sprockets/components/group')
 log('`shinkansen` is awake')
 
 const {
-  default: component
+  default: component // @ts-ignore
 } = require('./index.jsx')
 
 module.exports = component

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

@@ -1,16 +1,21 @@
 declare module '#sprockets/components/group' {
   import React from 'react'
 
-  export interface GroupProps {
-    onChange: SprocketsTypes.OnChangeType
-    groupRef: object
-    children: React.JSX.Element | React.JSX.Element[]
-  }
+  type GroupProps = SprocketsTypes.Components.Group.GroupProps
+  type GroupState = SprocketsTypes.Components.Group.GroupState
+
+  export default class Group<P extends GroupProps, S extends GroupState> extends React.Component<P, S> {
+    static propTypes: object
+
+    getClassName (): string
 
-  export default class Group extends React.Component<GroupProps> {}
+    shouldComponentUpdate (props: GroupProps, state: GroupState): boolean
+  }
 }
 
 declare module 'shinkansen-sprockets/components/group' {
+  export type GroupProps = SprocketsTypes.Components.Group.GroupProps
+  export type GroupState = SprocketsTypes.Components.Group.GroupState
+
   export { default } from '#sprockets/components/group'
-  export * from '#sprockets/components/group'
 }

package/src/components/group/index.jsx

@@ -1,42 +1,36 @@
 /**
- * Group component
- *
- * @typedef {import('shinkansen-sprockets/components/group').GroupProps} GroupProps
+ *  @typedef {SprocketsTypes.Components.Group.GroupProps} GroupProps
  */
 
+/**
+ * Group component
+ */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#sprockets/common'
-
 export default class Group extends Component {
   getClassName () {
     return 'group'
   }
 
   /**
-   * @param {GroupProps} props
-   * @returns {boolean}
+   *  @param {GroupProps} props
+   *  @returns {boolean}
    */
-  shouldComponentUpdate (props, state) {
+  shouldComponentUpdate (props) {
     return (
-      (props.onChange !== this.props.onChange) ||
       (props.children !== this.props.children)
     )
   }
 
   render () {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE,
       groupRef,
       children
     } = this.props
 
     return (
       <fieldset
-        onChange={onChange}
         className={this.getClassName()}
         ref={groupRef}>
         {children}
@@ -46,7 +40,6 @@ export default class Group extends Component {
 }
 
 Group.propTypes = {
-  onChange: PropTypes.func,
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(
@@ -54,6 +47,6 @@ Group.propTypes = {
     )
   ]),
   groupRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
+    current: PropTypes.shape({}).isRequired
   })
 }

package/src/components/title/index.cjs

@@ -11,7 +11,7 @@ const log = debug('shinkansen-sprockets/components/title')
 log('`shinkansen` is awake')
 
 const {
-  default: component
+  default: component // @ts-ignore
 } = require('./index.jsx')
 
 module.exports = component

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

@@ -1,14 +1,25 @@
 declare module '#sprockets/components/title' {
   import React from 'react'
 
-  export interface TitleProps {
-    title: string
-  }
+  type TitleProps = SprocketsTypes.Components.Title.TitleProps
+
+  export default class Title<P extends TitleProps> extends React.Component<P> {
+    static propTypes: object
+
+    hasTextContent (): boolean
+
+    getTextContent (): string
 
-  export default class Title extends React.Component<TitleProps> {}
+    getClassName (): string
+
+    shouldComponentUpdate (props: TitleProps): boolean
+
+    renderTextContent (): React.JSX.Element | null
+  }
 }
 
 declare module 'shinkansen-sprockets/components/title' {
+  export type TitleProps = SprocketsTypes.Components.Title.TitleProps
+
   export { default } from '#sprockets/components/title'
-  export * from '#sprockets/components/title'
 }

package/src/components/title/index.jsx

@@ -1,3 +1,7 @@
+/**
+ *  @typedef {SprocketsTypes.Components.Title.TitleProps} TitleProps
+ */
+
 /**
  * Title component
  */
@@ -8,13 +12,17 @@ import TextContent from '#sprockets/components/common/text-content'
 
 export default class Title extends Component {
   hasTextContent () {
-    const { title } = this.props
+    const {
+      title
+    } = this.props
 
     return !!title
   }
 
   getTextContent () {
-    const { title } = this.props
+    const {
+      title
+    } = this.props
 
     return title
   }
@@ -23,7 +31,11 @@ export default class Title extends Component {
     return 'title'
   }
 
-  shouldComponentUpdate (props, state) {
+  /**
+   *  @param {TitleProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
     return (
       (props.title !== this.props.title)
     )
@@ -34,7 +46,9 @@ export default class Title extends Component {
       const textContent = this.getTextContent()
 
       return (
-        <TextContent textContent={textContent} />
+        <TextContent
+          textContent={textContent}
+        />
       )
     }
 

package/src/index.d.mts

@@ -5,5 +5,13 @@ declare module '#sprockets' {
 }
 
 declare module 'shinkansen-sprockets' {
+  export type AnswerDefinitionType = SprocketsTypes.AnswerDefinitionType
+
+  export type FieldChangeType = SprocketsTypes.FieldChangeType
+
+  export type ErrorDefinitionType = SprocketsTypes.ErrorDefinitionType
+
+  export type FieldErrorType = SprocketsTypes.FieldErrorType
+
   export * from '#sprockets'
 }

package/src/sprockets/check-answers/group/answer-title.cjs

@@ -10,4 +10,5 @@ const log = debug('shinkansen-sprockets/sprockets/check-answers/group/answer-tit
 
 log('`shinkansen` is awake')
 
+// @ts-ignore
 module.exports = require('./answer-title.jsx')

package/src/sprockets/check-answers/group/answer-title.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
- * @param {SprocketsTypes.AnswerDefinitionType}
- * @returns {React.JSX.Element}
+ *  @param {{ answer: { title: string } }} answer
+ *  @returns {React.JSX.Element}
  */
 export default function AnswerTitle ({ answer: { title } }) {
   return (

package/src/sprockets/check-answers/group/answer-value.cjs

@@ -10,4 +10,5 @@ const log = debug('shinkansen-sprockets/sprockets/check-answers/group/answer-val
 
 log('`shinkansen` is awake')
 
+// @ts-ignore
 module.exports = require('./answer-value.jsx')

package/src/sprockets/check-answers/group/answer-value.jsx

@@ -2,22 +2,39 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
- * @param {string | string[]}
- * @returns {string | string[]}
+ *  @param {number} n
+ *  @returns {(
+ *    a: Array<string | React.JSX.Element>,
+ *    v: string,
+ *    i: number
+ *  ) => Array<string | React.JSX.Element>}
+ */
+function getReduce (n) {
+  /**
+   *  @param {Array<string | React.JSX.Element>} a
+   *  @param {string} v
+   *  @param {number} i
+   *  @returns {Array<string | React.JSX.Element>}
+   */
+  return function reduce (a, v, i) {
+    const s = String(v)
+
+    return (i !== n)
+      ? a.concat(s).concat(<br key={i} />)
+      : a.concat(s)
+  }
+}
+
+/**
+ *  @param {string | string[]} value
+ *  @returns {string | Array<string | React.JSX.Element>}
  */
 function getAnswerValue (value) {
   if (Array.isArray(value)) {
     const n = value.length - 1
 
     return (
-      value
-        .reduce((a, v, i) => {
-          const s = String(v)
-
-          return (i !== n)
-            ? a.concat(s).concat(<br key={i} />)
-            : a.concat(s)
-        }, [])
+      value.reduce(getReduce(n), [])
     )
   }
 
@@ -25,8 +42,8 @@ function getAnswerValue (value) {
 }
 
 /**
- * @param {SprocketsTypes.AnswerDefinitionType}
- * @returns {React.JSX.Element}
+ *  @param {{ answer: { value: string | string[] } }} answer
+ *  @returns {React.JSX.Element}
  */
 export default function AnswerValue ({ answer: { value } }) {
   return (

package/src/sprockets/check-answers/group/change-answer.cjs

@@ -10,4 +10,5 @@ const log = debug('shinkansen-sprockets/sprockets/check-answers/group/change-ans
 
 log('`shinkansen` is awake')
 
+// @ts-ignore
 module.exports = require('./change-answer.jsx')

package/src/sprockets/check-answers/group/change-answer.jsx

@@ -12,6 +12,10 @@ import VisuallyHiddenText from '#sprockets/components/common/visually-hidden-tex
 
 const log = debug('shinkansen-sprockets/sprockets/check-answers/group/change-answer')
 
+/**
+ * @param {{ textContent?: string, visuallyHiddenText: string }} props
+ * @returns {React.JSX.Element | null}
+ */
 function TextContentWithVisuallyHiddenText ({ textContent, visuallyHiddenText }) {
   return (
     <>
@@ -23,10 +27,14 @@ function TextContentWithVisuallyHiddenText ({ textContent, visuallyHiddenText })
 }
 
 TextContentWithVisuallyHiddenText.propTypes = {
-  textContent: PropTypes.string.isRequired,
-  visuallyHiddenText: PropTypes.string.isRequired
+  textContent: PropTypes.string,
+  visuallyHiddenText: PropTypes.string
 }
 
+/**
+ * @param {{ textContent?: string, visuallyHiddenText?: string }} props
+ * @returns {React.JSX.Element | null}
+ */
 function LinkText ({ textContent, visuallyHiddenText }) {
   if (textContent) {
     return (
@@ -35,16 +43,18 @@ function LinkText ({ textContent, visuallyHiddenText }) {
         : <TextContent textContent={textContent} />
     )
   }
+
+  return null
 }
 
 LinkText.propTypes = {
-  textContent: PropTypes.string.isRequired,
-  visuallyHiddenText: PropTypes.string.isRequired
+  textContent: PropTypes.string,
+  visuallyHiddenText: PropTypes.string
 }
 
 /**
- * @param {SprocketsTypes.AnswerDefinitionType}
- * @returns {React.JSX.Element}
+ *  @param {{ changeAnswer: { href: string, text: string, visuallyHiddenText?: string } }}  answer
+ *  @returns {React.JSX.Element}
  */
 export default function ChangeAnswer ({ changeAnswer: { href, text, visuallyHiddenText } }) {
   log('ChangeAnswer')
@@ -62,6 +72,6 @@ ChangeAnswer.propTypes = {
   changeAnswer: PropTypes.shape({
     href: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
-    visuallyHiddenText: PropTypes.string.isRequired
+    visuallyHiddenText: PropTypes.string
   }).isRequired
 }

package/src/sprockets/check-answers/group/index.cjs

@@ -11,7 +11,7 @@ const log = debug('shinkansen-sprockets/sprockets/check-answers/group')
 log('`shinkansen` is awake')
 
 const {
-  default: component
+  default: component // @ts-ignore
 } = require('./index.jsx')
 
 module.exports = component

package/src/sprockets/check-answers/group/index.d.mts

@@ -1,9 +1,15 @@
 declare module '#sprockets/sprockets/check-answers/group' {
   import Group from '#sprockets/components/group'
 
-  export default class CheckAnswersGroup extends Group {}
+  type CheckAnswersProps = SprocketsTypes.Components.Group.CheckAnswers.CheckAnswersProps
+  type CheckAnswersState = SprocketsTypes.Components.Group.CheckAnswers.CheckAnswersState
+
+  export default class CheckAnswersGroup<P extends CheckAnswersProps, S extends CheckAnswersState> extends Group<P, S> {}
 }
 
 declare module 'shinkansen-sprockets/sprockets/check-answers/group' {
+  export type CheckAnswersProps = SprocketsTypes.Components.Group.CheckAnswers.CheckAnswersProps
+  export type CheckAnswersState = SprocketsTypes.Components.Group.CheckAnswers.CheckAnswersState
+
   export { default } from '#sprockets/sprockets/check-answers/group'
 }

package/src/sprockets/check-answers/group/index.jsx

@@ -1,44 +1,56 @@
 /**
- * CheckAnswersGroup component
- *
- * @typedef {import('shinkansen-sprockets/components/group').GroupProps} GroupProps
- *
- * Group state
- *
- * @typedef {Object} GroupState
- * @property {{}} [checkAnswers]
+ *  @typedef {SprocketsTypes.AnswerDefinitionType} AnswerDefinitionType
+ *  @typedef {SprocketsTypes.Components.Group.GroupProps} GroupProps
+ *  @typedef {SprocketsTypes.Components.Group.GroupState} GroupState
+ *  @typedef {SprocketsTypes.Components.Group.CheckAnswers.CheckAnswersProps} CheckAnswersProps
+ *  @typedef {SprocketsTypes.Components.Group.CheckAnswers.CheckAnswersState} CheckAnswersState
  */
 
+/**
+ * CheckAnswersGroup component
+ */
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import debug from 'debug'
-
 import equal from 'fast-deep-equal'
 import classnames from 'classnames'
 
+import debug from 'debug'
+
 import Group from '#sprockets/components/group'
 
 import {
   getKey
 } from '#sprockets/transformers/common'
 
-import AnswerTitle from './answer-title.cjs'
-import AnswerValue from './answer-value.cjs'
-import ChangeAnswer from './change-answer.cjs'
+import AnswerTitle from './answer-title.jsx'
+import AnswerValue from './answer-value.jsx'
+import ChangeAnswer from './change-answer.jsx'
 
+/**
+ *  @type {AnswerDefinitionType[]}
+ */
 const DEFAULT_CHECK_ANSWERS = []
 
 const log = debug('shinkansen-sprockets/components/group/check-answers')
 
-/* eslint-disable-next-line react/prop-types */
+/**
+ * @param {AnswerDefinitionType} answer
+ * @param {number} index
+ * @returns {React.JSX.Element}
+ */
 function render ({ params: { answer, changeAnswer: { href, text, ...changeAnswer } } }, index) {
   log('render')
 
   return (
     <div key={getKey(href, text, index)} className='answer'>
-      <AnswerTitle answer={answer} />
-      <AnswerValue answer={answer} />
+      <AnswerTitle
+        answer={answer}
+      />
+
+      <AnswerValue
+        answer={answer}
+      />
+
       <ChangeAnswer
         changeAnswer={{ ...changeAnswer, href, text }}
       />
@@ -46,13 +58,14 @@ function render ({ params: { answer, changeAnswer: { href, text, ...changeAnswer
   )
 }
 
+/**
+ *  @extends {Group<GroupProps & CheckAnswersProps, GroupState & CheckAnswersState>}
+ */
 export default class CheckAnswersGroup extends Group {
   /**
-   * @type {GroupState}
+   *  @type {CheckAnswersState}
    */
-  state = {
-    checkAnswers: DEFAULT_CHECK_ANSWERS
-  }
+  state = {}
 
   getClassName () {
     return classnames(super.getClassName(), 'check-answers')
@@ -61,9 +74,9 @@ export default class CheckAnswersGroup extends Group {
   /**
    *  Compare latest 'props' with 'state' for changes to 'checkAnswers'
    *
-   * @param {GroupProps} props   Latest props
-   * @param {GroupState} state   Current state
-   * @returns {{checkAnswers: {}}}
+   *  @param {CheckAnswersProps} props   Latest props
+   *  @param {CheckAnswersState} state   Current state
+   *  @returns {CheckAnswersState}
    */
   static getDerivedStateFromProps ({ checkAnswers }, { checkAnswers: C }) {
     return {
@@ -74,9 +87,9 @@ export default class CheckAnswersGroup extends Group {
   /**
    * Compare latest 'props' with 'state' for changes to 'checkAnswers'
    *
-   * @param {GroupProps} props   Latest props
-   * @param {GroupState} state   Current state
-   * @returns {boolean}
+   *  @param {CheckAnswersProps} props   Latest props
+   *  @param {CheckAnswersState} state   Current state
+   *  @returns {boolean}
    */
   shouldComponentUpdate (props, state) {
     const {
@@ -95,6 +108,8 @@ export default class CheckAnswersGroup extends Group {
       checkAnswers = DEFAULT_CHECK_ANSWERS
     } = this.props
 
+    console.log('checkAnswers', checkAnswers)
+
     if (checkAnswers.length) {
       const {
         groupRef
@@ -115,5 +130,5 @@ export default class CheckAnswersGroup extends Group {
 
 CheckAnswersGroup.propTypes = {
   ...Group.propTypes,
-  checkAnswers: PropTypes.arrayOf(PropTypes.shape())
+  checkAnswers: PropTypes.arrayOf(PropTypes.shape({}))
 }

package/src/sprockets/check-answers/index.cjs

@@ -11,7 +11,7 @@ const log = debug('shinkansen-sprockets/sprockets/check-answers')
 log('`shinkansen` is awake')
 
 const {
-  default: component
+  default: component // @ts-ignore
 } = require('./index.jsx')
 
 module.exports = component

package/src/sprockets/check-answers/index.d.mts

@@ -1,9 +1,13 @@
 declare module '#sprockets/sprockets/check-answers' {
   import Sprocket from '#sprockets/sprockets'
 
-  export default class CheckAnswersSprocket extends Sprocket {}
+  type CheckAnswersProps = SprocketsTypes.Sprockets.Sprocket.CheckAnswers.CheckAnswersProps
+
+  export default class CheckAnswersSprocket<P extends CheckAnswersProps> extends Sprocket<P> {}
 }
 
 declare module 'shinkansen-sprockets/sprockets/check-answers' {
+  export type CheckAnswersProps = SprocketsTypes.Sprockets.Sprocket.CheckAnswers.CheckAnswersProps
+
   export { default } from '#sprockets/sprockets/check-answers'
 }