@modernpoacher/sprockets 0.0.187 → 0.0.189

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/sprockets",
-  "version": "0.0.187",
+  "version": "0.0.189",
   "description": "Sprockets",
   "keywords": [
     "Sprockets",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "debug": "^4.3.6"
+    "debug": "^4.3.7"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
     "@babel/register": "^7.24.6",
-    "@modernpoacher/design-system": "1.0.113",
+    "@modernpoacher/design-system": "1.0.179",
     "@modernpoacher/hooks": "^1.0.488",
     "@storybook/addon-actions": "7.6.20",
     "@storybook/addon-essentials": "7.6.20",
@@ -117,6 +117,7 @@
     "./sprockets/fieldset/description": "./src/sprockets/fieldset/description/index.cjs",
     "./sprockets/fieldset/error-message": "./src/sprockets/fieldset/error-message/index.cjs",
     "./sprockets/fieldset/group": "./src/sprockets/fieldset/group/index.cjs",
-    "./sprockets/fieldset/title": "./src/sprockets/fieldset/title/index.cjs"
+    "./sprockets/fieldset/title": "./src/sprockets/fieldset/title/index.cjs",
+    "./transformers/common": "./src/transformers/common/index.mjs"
   }
 }

package/src/components/description/index.jsx

@@ -12,7 +12,7 @@ export default class Description extends Component {
     return 'description'
   }
 
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
       (props.description !== this.props.description)
     )

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

@@ -18,7 +18,7 @@ export default class ErrorMessage extends Component {
    *  @param {{errorMessage?: string}} props   Latest props
    *  @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (props.errorMessage !== this.props.errorMessage)
   }
 

package/src/components/group/index.jsx

@@ -20,7 +20,7 @@ export default class Group extends Component {
    * @param {GroupProps} props
    * @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
       (props.onChange !== this.props.onChange) ||
       (props.children !== this.props.children)

package/src/components/title/index.jsx

@@ -23,7 +23,7 @@ export default class Title extends Component {
     return 'title'
   }
 
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
       (props.title !== this.props.title)
     )

package/src/index.d.mts

@@ -12,6 +12,11 @@ declare namespace SprocketsTypes {
       visuallyHiddenText?: string
     }
   }
+
+  export interface ErrorDefinitionType {
+    text: string
+    href: string
+  }
 }
 
 declare module '@modernpoacher/sprockets' {

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

@@ -6,41 +6,73 @@
  * Group state
  *
  * @typedef {Object} GroupState
- * @property {{}} [children]
+ * @property {{}} [checkAnswers]
  */
 
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import debug from 'debug'
+
+import equal from 'fast-deep-equal'
 import classnames from 'classnames'
 
 import Group from '@modernpoacher/sprockets/components/group'
 
+import {
+  getKey
+} from '@modernpoacher/sprockets/transformers/common'
+
+import AnswerTitle from './answer-title.cjs'
+import AnswerValue from './answer-value.cjs'
+import ChangeAnswer from './change-answer.cjs'
+
+const DEFAULT_CHECK_ANSWERS = []
+
+const log = debug('@modernpoacher/sprockets/components/group/check-answers')
+
+/* eslint-disable-next-line react/prop-types */
+function render ({ answer: { title, value }, changeAnswer: { href, text, ...changeAnswer } }, index) {
+  log('render')
+
+  return (
+    <div key={getKey(href, text, index)} className='answer'>
+      <AnswerTitle title={title} />
+      <AnswerValue value={value} />
+      <ChangeAnswer
+        changeAnswer={{ ...changeAnswer, href, text }}
+      />
+    </div>
+  )
+}
+
 export default class CheckAnswersGroup extends Group {
   /**
    * @type {GroupState}
    */
-  state = {}
+  state = {
+    checkAnswers: DEFAULT_CHECK_ANSWERS
+  }
 
   getClassName () {
     return classnames(super.getClassName(), 'check-answers')
   }
 
   /**
-   *  Compare latest 'props' with 'state' for changes to 'children'
+   *  Compare latest 'props' with 'state' for changes to 'checkAnswers'
    *
    * @param {GroupProps} props   Latest props
    * @param {GroupState} state   Current state
-   * @returns {{children: {}}}
+   * @returns {{checkAnswers: {}}}
    */
-  static getDerivedStateFromProps ({ children: c }, { children: C }) {
+  static getDerivedStateFromProps ({ checkAnswers }, { checkAnswers: C }) {
     return {
-      children: (c !== C) ? c : C
+      checkAnswers: equal(checkAnswers, C) ? C : checkAnswers
     }
   }
 
   /**
-   * Compare latest 'props' with 'state' for changes to 'children'
+   * Compare latest 'props' with 'state' for changes to 'checkAnswers'
    *
    * @param {GroupProps} props   Latest props
    * @param {GroupState} state   Current state
@@ -48,11 +80,11 @@ export default class CheckAnswersGroup extends Group {
    */
   shouldComponentUpdate (props, state) {
     const {
-      children: c
+      checkAnswers: c = DEFAULT_CHECK_ANSWERS
     } = state
 
     const {
-      children: C
+      checkAnswers: C = DEFAULT_CHECK_ANSWERS
     } = this.state
 
     return (c !== C)
@@ -60,16 +92,19 @@ export default class CheckAnswersGroup extends Group {
 
   render () {
     const {
-      groupRef,
-      children
+      checkAnswers = DEFAULT_CHECK_ANSWERS
     } = this.props
 
-    if (children) {
+    if (checkAnswers.length) {
+      const {
+        groupRef
+      } = this.props
+
       return (
         <dl
           className={this.getClassName()}
           ref={groupRef}>
-          {children}
+          {checkAnswers.map(render)}
         </dl>
       )
     }
@@ -80,14 +115,5 @@ export default class CheckAnswersGroup extends Group {
 
 CheckAnswersGroup.propTypes = {
   ...Group.propTypes,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ])
-}
-
-CheckAnswersGroup.defaultProps = {
-  ...Group.defaultProps
+  checkAnswers: PropTypes.arrayOf(PropTypes.shape())
 }

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

@@ -13,6 +13,8 @@ import Sprocket from '@modernpoacher/sprockets/sprockets'
 import Title from './title/index.jsx'
 import Group from './group/index.jsx'
 
+const DEFAULT_CHECK_ANSWERS = []
+
 export default class CheckAnswersSprocket extends Sprocket {
   getClassName () {
     return classnames(super.getClassName(), 'check-answers')
@@ -22,10 +24,10 @@ export default class CheckAnswersSprocket extends Sprocket {
    * @param {SprocketProps} props
    * @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
-      (props.children !== this.props.children)
+      super.shouldComponentUpdate(props, state) ||
+      (props.checkAnswers !== this.props.checkAnswers)
     )
   }
 
@@ -43,22 +45,22 @@ export default class CheckAnswersSprocket extends Sprocket {
 
   renderGroup () {
     const {
-      children
+      checkAnswers = DEFAULT_CHECK_ANSWERS
     } = this.props
 
     return (
-      <Group>
-        {children}
-      </Group>
+      <Group
+        checkAnswers={checkAnswers}
+      />
     )
   }
 
   render () {
     const {
-      children
+      checkAnswers = DEFAULT_CHECK_ANSWERS
     } = this.props
 
-    if (children) {
+    if (checkAnswers.length) {
       return (
         <div className={this.getClassName()}>
           {this.renderTitle()}
@@ -73,14 +75,5 @@ export default class CheckAnswersSprocket extends Sprocket {
 
 CheckAnswersSprocket.propTypes = {
   ...Sprocket.propTypes,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ])
-}
-
-CheckAnswersSprocket.defaultProps = {
-  ...Sprocket.defaultProps
+  checkAnswers: PropTypes.arrayOf(PropTypes.shape())
 }

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

@@ -27,7 +27,3 @@ export default class CheckAnswersTitle extends Title {
 CheckAnswersTitle.propTypes = {
   ...Title.propTypes
 }
-
-CheckAnswersTitle.defaultProps = {
-  ...Title.defaultProps
-}

package/src/sprockets/error-summary/group/index.jsx

@@ -6,41 +6,69 @@
  * Group state
  *
  * @typedef {Object} GroupState
- * @property {{}} [children]
+ * @property {{}} [errorSummary]
  */
 
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import debug from 'debug'
+
+import equal from 'fast-deep-equal'
 import classnames from 'classnames'
 
 import Group from '@modernpoacher/sprockets/components/group'
 
+import {
+  getKey
+} from '@modernpoacher/sprockets/transformers/common'
+
+import TextContent from '@modernpoacher/sprockets/components/common/text-content'
+
+const DEFAULT_ERROR_SUMMARY = []
+
+const log = debug('@modernpoacher/sprockets/sprockets/error-summary/group')
+
+/* eslint-disable-next-line react/prop-types */
+function render ({ href, text }, index) {
+  log('render')
+
+  return (
+    <li key={getKey(href, text, index)} className='error'>
+      <a href={href}>
+        <TextContent textContent={text} />
+      </a>
+    </li>
+  )
+}
+
 export default class ErrorSummaryGroup extends Group {
   /**
    * @type {GroupState}
    */
-  state = {}
+  state = {
+    errorSummary: DEFAULT_ERROR_SUMMARY
+  }
 
   getClassName () {
     return classnames(super.getClassName(), 'error-summary')
   }
 
   /**
-   * Compare latest 'props' with 'state' for changes to 'children'
+   * Compare latest 'props' with 'state' for changes to 'errorSummary'
    *
    * @param {GroupProps} props   Latest props
    * @param {GroupState} state   Current state
    * @returns {GroupState}
    */
-  static getDerivedStateFromProps ({ children: e }, { children: E }) {
+  static getDerivedStateFromProps ({ errorSummary }, { errorSummary: E }) {
     return {
-      children: (e !== E) ? e : E
+      errorSummary: equal(errorSummary, E) ? E : errorSummary
     }
   }
 
   /**
-   * Compare latest 'props' with 'state' for changes to 'children'
+   * Compare latest 'props' with 'state' for changes to 'errorSummary'
    *
    * @param {GroupProps} props   Latest props
    * @param {GroupState} state   Current state
@@ -48,11 +76,11 @@ export default class ErrorSummaryGroup extends Group {
    */
   shouldComponentUpdate (props, state) {
     const {
-      children: e
+      errorSummary: e = DEFAULT_ERROR_SUMMARY
     } = state
 
     const {
-      children: E
+      errorSummary: E = DEFAULT_ERROR_SUMMARY
     } = this.state
 
     return (e !== E)
@@ -60,16 +88,19 @@ export default class ErrorSummaryGroup extends Group {
 
   render () {
     const {
-      groupRef,
-      children
+      errorSummary = DEFAULT_ERROR_SUMMARY
     } = this.props
 
-    if (children) {
+    if (errorSummary.length) {
+      const {
+        groupRef
+      } = this.props
+
       return (
         <ul
           className={this.getClassName()}
           ref={groupRef}>
-          {children}
+          {errorSummary.map(render)}
         </ul>
       )
     }
@@ -80,14 +111,5 @@ export default class ErrorSummaryGroup extends Group {
 
 ErrorSummaryGroup.propTypes = {
   ...Group.propTypes,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ])
-}
-
-ErrorSummaryGroup.defaultProps = {
-  ...Group.defaultProps
+  errorSummary: PropTypes.arrayOf(PropTypes.shape())
 }

package/src/sprockets/error-summary/index.jsx

@@ -13,6 +13,8 @@ import Sprocket from '@modernpoacher/sprockets/sprockets'
 import Title from './title/index.jsx'
 import Group from './group/index.jsx'
 
+const DEFAULT_ERROR_SUMMARY = []
+
 export default class ErrorSummarySprocket extends Sprocket {
   getClassName () {
     return classnames(super.getClassName(), 'error-summary')
@@ -22,10 +24,10 @@ export default class ErrorSummarySprocket extends Sprocket {
    * @param {SprocketProps} props
    * @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
-      (props.children !== this.props.children)
+      super.shouldComponentUpdate(props, state) ||
+      (props.errorSummary !== this.props.errorSummary)
     )
   }
 
@@ -43,22 +45,22 @@ export default class ErrorSummarySprocket extends Sprocket {
 
   renderGroup () {
     const {
-      children
+      errorSummary = DEFAULT_ERROR_SUMMARY
     } = this.props
 
     return (
-      <Group>
-        {children}
-      </Group>
+      <Group
+        errorSummary={errorSummary}
+      />
     )
   }
 
   render () {
     const {
-      children
+      errorSummary = DEFAULT_ERROR_SUMMARY
     } = this.props
 
-    if (children) {
+    if (errorSummary.length) {
       const className = this.getClassName()
 
       return (
@@ -75,14 +77,5 @@ export default class ErrorSummarySprocket extends Sprocket {
 
 ErrorSummarySprocket.propTypes = {
   ...Sprocket.propTypes,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ])
-}
-
-ErrorSummarySprocket.defaultProps = {
-  ...Sprocket.defaultProps
+  errorSummary: PropTypes.arrayOf(PropTypes.shape())
 }

package/src/sprockets/error-summary/title/index.jsx

@@ -27,7 +27,3 @@ export default class ErrorSummaryTitle extends Title {
 ErrorSummaryTitle.propTypes = {
   ...Title.propTypes
 }
-
-ErrorSummaryTitle.defaultProps = {
-  ...Title.defaultProps
-}

package/src/sprockets/fieldset/description/index.jsx

@@ -14,7 +14,3 @@ export default class FieldsetDescription extends Description {
 FieldsetDescription.propTypes = {
   ...Description.propTypes
 }
-
-FieldsetDescription.defaultProps = {
-  ...Description.defaultProps
-}

package/src/sprockets/fieldset/error-message/index.jsx

@@ -14,7 +14,3 @@ export default class FieldsetErrorMessage extends ErrorMessage {
 FieldsetErrorMessage.propTypes = {
   ...ErrorMessage.propTypes
 }
-
-FieldsetErrorMessage.defaultProps = {
-  ...ErrorMessage.defaultProps
-}

package/src/sprockets/fieldset/group/index.jsx

@@ -14,7 +14,3 @@ export default class FieldsetGroup extends Group {
 FieldsetGroup.propTypes = {
   ...Group.propTypes
 }
-
-FieldsetGroup.defaultProps = {
-  ...Group.defaultProps
-}

package/src/sprockets/fieldset/index.jsx

@@ -33,9 +33,9 @@ export default class FieldsetSprocket extends Sprocket {
    * @param {SprocketProps} props
    * @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
+      super.shouldComponentUpdate(props, state) ||
       (props.description !== this.props.description) ||
       (props.errorMessage !== this.props.errorMessage)
     )
@@ -104,7 +104,3 @@ FieldsetSprocket.propTypes = {
     uri: PropTypes.string.isRequired
   })
 }
-
-FieldsetSprocket.defaultProps = {
-  ...Sprocket.defaultProps
-}

package/src/sprockets/fieldset/title/index.jsx

@@ -13,7 +13,3 @@ export default class FieldsetTitle extends Title {
 FieldsetTitle.propTypes = {
   ...Title.propTypes
 }
-
-FieldsetTitle.defaultProps = {
-  ...Title.defaultProps
-}

package/src/sprockets/index.jsx

@@ -23,7 +23,7 @@ export default class Sprocket extends Component {
    * @param {SprocketProps} props
    * @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
       (props.children !== this.props.children) ||
       (props.title !== this.props.title) ||
@@ -84,7 +84,3 @@ Sprocket.propTypes = {
     current: PropTypes.shape().isRequired
   })
 }
-
-Sprocket.defaultProps = {
-  onChange: DEFAULT_HANDLE_CHANGE
-}

package/src/transformers/common/index.d.mts

@@ -0,0 +1,3 @@
+declare module '@modernpoacher/sprockets/transformers/common' {
+  export function getKey (href: string, text: string, index: number): string
+}

package/src/transformers/common/index.mjs

@@ -0,0 +1,26 @@
+import debug from 'debug'
+
+const CHAR32 = String.fromCharCode(32)
+const CHAR45 = String.fromCharCode(45)
+
+const log = debug('@modernpoacher/sprockets/transformers/common')
+
+log('`shinkansen` is awake')
+
+/**
+ * @param {string} href
+ * @param {string} text
+ * @param {number} index
+ * @returns {string}
+ */
+export function getKey (href, text, index) {
+  return (
+    `${href}-${text}-${index}`
+      .toLowerCase()
+      .replace(/^#/, 'error-')
+      .replace(/[^\w\-\d]/g, CHAR32).trim()
+      .replace(/\s\s+/g, CHAR32)
+      .replace(/\-\-+/g, CHAR45) // eslint-disable-line
+      .replace(/[\s\s|\-\-|\s\-|\-\s]+/g, CHAR45) // eslint-disable-line
+  )
+}