@modernpoacher/sprockets 0.0.288 → 1.0.0

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

@@ -0,0 +1,13 @@
+declare module '#sprockets/sprockets/check-answers/group' {
+  import Group from '#sprockets/super/components/group'
+
+  export type CheckAnswersProps = SprocketsTypes.Sprockets.CheckAnswers.Group.CheckAnswersProps
+  export type CheckAnswersState = SprocketsTypes.Sprockets.CheckAnswers.Group.CheckAnswersState
+
+  export default class CheckAnswersGroup<P extends CheckAnswersProps, S extends CheckAnswersState> extends Group<P, S> {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/check-answers/group' {
+  export { default } from '#sprockets/sprockets/check-answers/group'
+  export * from '#sprockets/sprockets/check-answers/group'
+}

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

@@ -0,0 +1,134 @@
+/**
+ *  @typedef {SprocketsTypes.AnswerDefinitionType} AnswerDefinitionType
+ *  @typedef {SprocketsTypes.Super.Components.Group.GroupProps} GroupProps
+ *  @typedef {SprocketsTypes.Super.Components.Group.GroupState} GroupState
+ *  @typedef {SprocketsTypes.Sprockets.CheckAnswers.Group.CheckAnswersProps} CheckAnswersProps
+ *  @typedef {SprocketsTypes.Sprockets.CheckAnswers.Group.CheckAnswersState} CheckAnswersState
+ */
+
+/**
+ *  CheckAnswersGroup component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import equal from 'fast-deep-equal'
+
+import debug from 'debug'
+
+import Group from '#sprockets/super/components/group'
+
+import {
+  getKey
+} from '#sprockets/transformers/common'
+
+import AnswerTitle from '#sprockets/sprockets/check-answers/group/answer-title'
+import AnswerValue from '#sprockets/sprockets/check-answers/group/answer-value'
+import ChangeAnswer from '#sprockets/sprockets/check-answers/group/change-answer'
+
+/**
+ *  @type {AnswerDefinitionType[]}
+ */
+const DEFAULT_CHECK_ANSWERS = []
+
+const log = debug('@modernpoacher/sprockets/components/group/check-answers')
+
+/**
+ *  @param {AnswerDefinitionType} answer
+ *  @param {number} index
+ *  @returns {React.JSX.Element}
+ */
+function render ({ answer: { title, value }, changeAnswer: { href, text, visuallyHiddenText } }, index) {
+  log('render')
+
+  return (
+    <div key={getKey(href, text, index)} className='answer'>
+      <AnswerTitle
+        title={title}
+      />
+
+      <AnswerValue
+        value={value}
+      />
+
+      <ChangeAnswer
+        href={href}
+        text={text}
+        visuallyHiddenText={visuallyHiddenText}
+      />
+    </div>
+  )
+}
+
+/**
+ *  @extends {Group<GroupProps & CheckAnswersProps, GroupState & CheckAnswersState>}
+ */
+export default class CheckAnswersGroup extends Group {
+  /**
+   *  @type {CheckAnswersState}
+   */
+  state = {}
+
+  getClassName () {
+    return classnames(super.getClassName(), 'check-answers')
+  }
+
+  /**
+   *  Compare latest 'props' with 'state' for changes to 'checkAnswers'
+   *
+   *  @param {CheckAnswersProps} props   Latest props
+   *  @param {CheckAnswersState} state   Current state
+   *  @returns {CheckAnswersState}
+   */
+  static getDerivedStateFromProps ({ checkAnswers: c }, { checkAnswers: C }) {
+    return {
+      checkAnswers: (c === C || equal(c, C)) ? C : c
+    }
+  }
+
+  /**
+   *  Compare latest 'props' with 'state' for changes to 'checkAnswers'
+   *
+   *  @param {CheckAnswersProps} props   Latest props
+   *  @param {CheckAnswersState} state   Current state
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      checkAnswers: c = DEFAULT_CHECK_ANSWERS
+    } = this.state
+
+    const {
+      checkAnswers: C = DEFAULT_CHECK_ANSWERS
+    } = state
+
+    return !(c === C || equal(c, C))
+  }
+
+  render () {
+    const {
+      checkAnswers = DEFAULT_CHECK_ANSWERS
+    } = this.props
+
+    if (checkAnswers.length) {
+      const {
+        groupRef
+      } = this.props
+
+      return (
+        <dl
+          className={this.getClassName()}
+          ref={groupRef}>
+          {checkAnswers.map(render)}
+        </dl>
+      )
+    }
+
+    return null
+  }
+}
+
+CheckAnswersGroup.propTypes = {
+  ...Group.propTypes,
+  checkAnswers: PropTypes.arrayOf(PropTypes.shape({}))
+}

package/src/{sprockets → js/sprockets}/check-answers/index.cjs

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

package/src/js/sprockets/check-answers/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/sprockets/check-answers'
+export * from '#sprockets/sprockets/check-answers'

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

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

package/src/{sprockets → js/sprockets}/check-answers/index.jsx

@@ -1,33 +1,46 @@
 /**
- * CheckAnswersSprocket component
- *
- * @typedef {import('@modernpoacher/sprockets/sprockets').SprocketProps} SprocketProps
+ *  @typedef {SprocketsTypes.AnswerDefinitionType} AnswerDefinitionType
+ *  @typedef {SprocketsTypes.Sprockets.SprocketProps} SprocketProps
+ *  @typedef {SprocketsTypes.Sprockets.CheckAnswers.CheckAnswersProps} CheckAnswersProps
  */
 
+/**
+ *  CheckAnswersSprocket component
+ */
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import classnames from 'classnames'
 
 import Sprocket from '#sprockets/sprockets'
-import Title from './title/index.jsx'
-import Group from './group/index.jsx'
+import Title from '#sprockets/sprockets/check-answers/title'
+import Group from '#sprockets/sprockets/check-answers/group'
 
+/**
+ *  @type {AnswerDefinitionType[]}
+ */
 const DEFAULT_CHECK_ANSWERS = []
 
+/**
+ *  @extends {Sprocket<SprocketProps & CheckAnswersProps>}
+ */
 export default class CheckAnswersSprocket extends Sprocket {
   getClassName () {
     return classnames(super.getClassName(), 'check-answers')
   }
 
   /**
-   * @param {SprocketProps} props
-   * @returns {boolean}
+   *  @param {CheckAnswersProps} props
+   *  @returns {boolean}
    */
-  shouldComponentUpdate (props, state) {
+  shouldComponentUpdate (props) {
+    const {
+      checkAnswers,
+      ...superProps
+    } = props
+
     return (
-      super.shouldComponentUpdate(props, state) ||
-      (props.checkAnswers !== this.props.checkAnswers)
+      super.shouldComponentUpdate(superProps) ||
+      (checkAnswers !== this.props.checkAnswers)
     )
   }
 
@@ -75,5 +88,5 @@ export default class CheckAnswersSprocket extends Sprocket {
 
 CheckAnswersSprocket.propTypes = {
   ...Sprocket.propTypes,
-  checkAnswers: PropTypes.arrayOf(PropTypes.shape())
+  checkAnswers: PropTypes.arrayOf(PropTypes.shape({}))
 }

package/src/{sprockets → js/sprockets}/check-answers/title/index.cjs

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

package/src/js/sprockets/check-answers/title/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/sprockets/check-answers/title'
+export * from '#sprockets/sprockets/check-answers/title'

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

@@ -0,0 +1,12 @@
+declare module '#sprockets/sprockets/check-answers/title' {
+  import Title from '#sprockets/super/components/title'
+
+  export type CheckAnswersProps = SprocketsTypes.Sprockets.CheckAnswers.Title.CheckAnswersProps
+
+  export default class CheckAnswersTitle<P extends CheckAnswersProps> extends Title<P> {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/check-answers/title' {
+  export { default } from '#sprockets/sprockets/check-answers/title'
+  export * from '#sprockets/sprockets/check-answers/title'
+}

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

@@ -0,0 +1,37 @@
+/**
+ *  @typedef {SprocketsTypes.Super.Components.Title.TitleProps} TitleProps
+ *  @typedef {SprocketsTypes.Sprockets.CheckAnswers.Title.CheckAnswersProps} CheckAnswersProps
+ */
+
+/**
+ *  CheckAnswersTitle component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import Title from '#sprockets/super/components/title'
+
+/**
+ *  @extends {Title<TitleProps & CheckAnswersProps>}
+ */
+export default class CheckAnswersTitle extends Title {
+  getClassName () {
+    return classnames(super.getClassName(), 'check-answers')
+  }
+
+  render () {
+    const {
+      title
+    } = this.props
+
+    if (title) {
+      return (
+        <h2 className={this.getClassName()}>
+          {this.renderTextContent(title)}
+        </h2>
+      )
+    }
+
+    return null
+  }
+}

package/src/{sprockets → js/sprockets}/error-summary/group/index.cjs

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

package/src/js/sprockets/error-summary/group/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/sprockets/error-summary/group'
+export * from '#sprockets/sprockets/error-summary/group'

package/src/js/sprockets/error-summary/group/index.d.mts

@@ -0,0 +1,13 @@
+declare module '#sprockets/sprockets/error-summary/group' {
+  import Group from '#sprockets/super/components/group'
+
+  export type ErrorSummaryProps = SprocketsTypes.Sprockets.ErrorSummary.Group.ErrorSummaryProps
+  export type ErrorSummaryState = SprocketsTypes.Sprockets.ErrorSummary.Group.ErrorSummaryState
+
+  export default class ErrorSummaryGroup<P extends ErrorSummaryProps, S extends ErrorSummaryState> extends Group<P, S> {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/error-summary/group' {
+  export { default } from '#sprockets/sprockets/error-summary/group'
+  export * from '#sprockets/sprockets/error-summary/group'
+}

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

@@ -0,0 +1,124 @@
+/**
+ *  @typedef {SprocketsTypes.ErrorDefinitionType} ErrorDefinitionType
+ *  @typedef {SprocketsTypes.Super.Components.Group.GroupProps} GroupProps
+ *  @typedef {SprocketsTypes.Super.Components.Group.GroupState} GroupState
+ *  @typedef {SprocketsTypes.Sprockets.ErrorSummary.Group.ErrorSummaryProps} ErrorSummaryProps
+ *  @typedef {SprocketsTypes.Sprockets.ErrorSummary.Group.ErrorSummaryState} ErrorSummaryState
+ */
+
+/**
+ *  ErrorSummaryGroup component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import equal from 'fast-deep-equal'
+
+import debug from 'debug'
+
+import Group from '#sprockets/super/components/group'
+
+import {
+  getKey
+} from '#sprockets/transformers/common'
+
+import TextContent from '#sprockets/components/common/text-content'
+
+/**
+ *  @type {ErrorDefinitionType[]}
+ */
+const DEFAULT_ERROR_SUMMARY = []
+
+const log = debug('@modernpoacher/sprockets/sprockets/error-summary/group')
+
+/**
+ *  @param {ErrorDefinitionType} error
+ *  @param {number} index
+ *  @returns {React.JSX.Element}
+ */
+function render ({ href, text }, index) {
+  log('render')
+
+  return (
+    <li key={getKey(href, text, index)} className='error'>
+      <a href={href}>
+        <TextContent
+          textContent={text}
+        />
+      </a>
+    </li>
+  )
+}
+
+/**
+ *  @extends {Group<GroupProps & ErrorSummaryProps, GroupState & ErrorSummaryState>}
+ */
+export default class ErrorSummaryGroup extends Group {
+  /**
+   *  @type {ErrorSummaryState}
+   */
+  state = {}
+
+  getClassName () {
+    return classnames(super.getClassName(), 'error-summary')
+  }
+
+  /**
+   *  Compare latest 'props' with 'state' for changes to 'errorSummary'
+   *
+   *  @param {ErrorSummaryProps} props   Latest props
+   *  @param {ErrorSummaryState} state   Current state
+   *  @returns {ErrorSummaryState}
+   */
+  static getDerivedStateFromProps ({ errorSummary: e }, { errorSummary: E }) {
+    return {
+      errorSummary: (e === E || equal(e, E)) ? E : e
+    }
+  }
+
+  /**
+   *  Compare latest 'props' with 'state' for changes to 'errorSummary'
+   *
+   *  @param {ErrorSummaryProps} props   Latest props
+   *  @param {ErrorSummaryState} state   Current state
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      errorSummary: e = DEFAULT_ERROR_SUMMARY
+    } = this.state
+
+    const {
+      errorSummary: E = DEFAULT_ERROR_SUMMARY
+    } = state
+
+    return !(e === E || equal(e, E))
+  }
+
+  render () {
+    const {
+      errorSummary = DEFAULT_ERROR_SUMMARY
+    } = this.props
+
+    if (errorSummary.length) {
+      const {
+        groupRef
+      } = this.props
+
+      return (
+        <ul
+          className={this.getClassName()}
+          ref={groupRef}>
+          {errorSummary.map(render)}
+        </ul>
+      )
+    }
+
+    return null
+  }
+}
+
+ErrorSummaryGroup.propTypes = {
+  ...Group.propTypes,
+  errorSummary: PropTypes.arrayOf(PropTypes.shape({}))
+}

package/src/{sprockets → js/sprockets}/error-summary/index.cjs

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

package/src/js/sprockets/error-summary/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/sprockets/error-summary'
+export * from '#sprockets/sprockets/error-summary'

package/src/js/sprockets/error-summary/index.d.mts

@@ -0,0 +1,12 @@
+declare module '#sprockets/sprockets/error-summary' {
+  import Sprocket from '#sprockets/sprockets'
+
+  export type ErrorSummaryProps = SprocketsTypes.Sprockets.ErrorSummary.ErrorSummaryProps
+
+  export default class ErrorSummarySprocket<P extends ErrorSummaryProps> extends Sprocket<P> {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/error-summary' {
+  export { default } from '#sprockets/sprockets/error-summary'
+  export * from '#sprockets/sprockets/error-summary'
+}

package/src/{sprockets → js/sprockets}/error-summary/index.jsx

@@ -1,33 +1,46 @@
 /**
- * ErrorSummarySprocket component
- *
- * @typedef {import('@modernpoacher/sprockets/sprockets').SprocketProps} SprocketProps
+ *  @typedef {SprocketsTypes.ErrorDefinitionType} ErrorDefinitionType
+ *  @typedef {SprocketsTypes.Sprockets.SprocketProps} SprocketProps
+ *  @typedef {SprocketsTypes.Sprockets.ErrorSummary.ErrorSummaryProps} ErrorSummaryProps
  */
 
+/**
+ *  ErrorSummarySprocket component
+ */
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import classnames from 'classnames'
 
 import Sprocket from '#sprockets/sprockets'
-import Title from './title/index.jsx'
-import Group from './group/index.jsx'
+import Title from '#sprockets/sprockets/error-summary/title'
+import Group from '#sprockets/sprockets/error-summary/group'
 
+/**
+ *  @type {ErrorDefinitionType[]}
+ */
 const DEFAULT_ERROR_SUMMARY = []
 
+/**
+ *  @extends {Sprocket<SprocketProps & ErrorSummaryProps>}
+ */
 export default class ErrorSummarySprocket extends Sprocket {
   getClassName () {
     return classnames(super.getClassName(), 'error-summary')
   }
 
   /**
-   * @param {SprocketProps} props
-   * @returns {boolean}
+   *  @param {ErrorSummaryProps} props
+   *  @returns {boolean}
    */
-  shouldComponentUpdate (props, state) {
+  shouldComponentUpdate (props) {
+    const {
+      errorSummary,
+      ...superProps
+    } = props
+
     return (
-      super.shouldComponentUpdate(props, state) ||
-      (props.errorSummary !== this.props.errorSummary)
+      super.shouldComponentUpdate(superProps) ||
+      (errorSummary !== this.props.errorSummary)
     )
   }
 
@@ -64,7 +77,7 @@ export default class ErrorSummarySprocket extends Sprocket {
       const className = this.getClassName()
 
       return (
-        <div tabIndex='-1' className={className}>
+        <div tabIndex={-1} className={className}>
           {this.renderTitle()}
           {this.renderGroup()}
         </div>
@@ -77,5 +90,5 @@ export default class ErrorSummarySprocket extends Sprocket {
 
 ErrorSummarySprocket.propTypes = {
   ...Sprocket.propTypes,
-  errorSummary: PropTypes.arrayOf(PropTypes.shape())
+  errorSummary: PropTypes.arrayOf(PropTypes.shape({}))
 }

package/src/{sprockets → js/sprockets}/error-summary/title/index.cjs

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

package/src/js/sprockets/error-summary/title/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#sprockets/sprockets/error-summary/title'
+export * from '#sprockets/sprockets/error-summary/title'

package/src/js/sprockets/error-summary/title/index.d.mts

@@ -0,0 +1,12 @@
+declare module '#sprockets/sprockets/error-summary/title' {
+  import Title from '#sprockets/super/components/title'
+
+  export type ErrorSummaryProps = SprocketsTypes.Sprockets.ErrorSummary.Title.ErrorSummaryProps
+
+  export default class ErrorSummaryTitle<P extends ErrorSummaryProps> extends Title<P> {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/error-summary/title' {
+  export { default } from '#sprockets/sprockets/error-summary/title'
+  export * from '#sprockets/sprockets/error-summary/title'
+}

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

@@ -0,0 +1,37 @@
+/**
+ *  @typedef {SprocketsTypes.Super.Components.Title.TitleProps} TitleProps
+ *  @typedef {SprocketsTypes.Sprockets.ErrorSummary.Title.ErrorSummaryProps} ErrorSummaryProps
+ */
+
+/**
+ *  ErrorSummaryTitle component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import Title from '#sprockets/super/components/title'
+
+/**
+ *  @extends {Title<TitleProps & ErrorSummaryProps>}
+ */
+export default class ErrorSummaryTitle extends Title {
+  getClassName () {
+    return classnames(super.getClassName(), 'error-summary')
+  }
+
+  render () {
+    const {
+      title
+    } = this.props
+
+    if (title) {
+      return (
+        <h2 className={this.getClassName()}>
+          {this.renderTextContent(title)}
+        </h2>
+      )
+    }
+
+    return null
+  }
+}

package/src/{sprockets → js/sprockets}/fieldset/description/index.cjs

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

package/src/js/sprockets/fieldset/description/index.d.cts

@@ -0,0 +1 @@
+export { default } from '#sprockets/sprockets/fieldset/description'