@modernpoacher/sprockets 0.0.5

package/src/index.d.cts

@@ -0,0 +1,172 @@
+declare namespace SprocketsTypes {
+  export type OnChangeType = () => void
+
+  export type AnswerDefinitionType = {
+    answer: {
+      title: string
+      value: string | string[]
+    }
+    changeAnswer: {
+      text: string
+      href: string
+      visuallyHiddenText?: string
+    }
+  }
+
+  export type ErrorDefinitionType = {
+    type: string,
+    uri: string,
+    params: {
+      expectedType: string
+    }
+  }
+
+  export type ComponentsType = {}
+
+  export type FieldChangeType = {
+    text: string,
+    href: string
+  }
+
+  export type FieldErrorType = {
+    text: string,
+    href: string
+  }
+}
+
+declare module '@modernpoacher/sprockets/components/common/text-content' {
+  import React from 'react'
+
+  export type TextContentProps = {
+    textContent: string
+  }
+
+  export default function TextContent(props: TextContentProps): React.JSX.Element
+}
+
+declare module '@modernpoacher/sprockets/components/description' {
+  import React from 'react'
+
+  export type DescriptionProps = {
+    description: string
+  }
+
+  export default class Description extends React.Component<DescriptionProps> {}
+}
+
+declare module '@modernpoacher/sprockets/components/error-message' {
+  import React from 'react'
+
+  export type ErrorMessageProps = {
+    errorMessage: string
+  }
+
+  export default class ErrorMessage extends React.Component<ErrorMessageProps> {}
+}
+
+declare module '@modernpoacher/sprockets/components/title' {
+  import React from 'react'
+
+  export type TitleProps = {
+    title: string
+  }
+
+  export default class Title extends React.Component<TitleProps> {}
+}
+
+declare module '@modernpoacher/sprockets/components/group' {
+  import React from 'react'
+
+  export type GroupProps = {
+    onChange: SprocketsTypes.OnChangeType,
+    groupRef: object,
+    children: React.JSX.Element | React.JSX.Element[]
+  }
+
+  export default class Group extends React.Component<GroupProps> {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/check-answers/title' {
+  import Title from '@modernpoacher/sprockets/components/title'
+
+  export default class CheckAnswersTitle extends Title {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/check-answers/group' {
+  import Group from '@modernpoacher/sprockets/components/group'
+
+  export default class CheckAnswersGroup extends Group {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/check-answers' {
+  import Sprocket from '@modernpoacher/sprockets/sprockets'
+
+  export default class ErrorSummarySprocket extends Sprocket {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/error-summary/title' {
+  import Title from '@modernpoacher/sprockets/components/title'
+
+  export default class ErrorSummaryTitle extends Title {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/error-summary/group' {
+  import Group from '@modernpoacher/sprockets/components/group'
+
+  export default class ErrorSummaryGroup extends Group {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/error-summary' {
+  import Sprocket from '@modernpoacher/sprockets/sprockets'
+
+  export default class CheckAnswersSprocket extends Sprocket {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/fieldset/description' {
+  import Description from '@modernpoacher/sprockets/components/description'
+
+  export default class FieldsetDescription extends Description {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/fieldset/error-message' {
+  import ErrorMessage from '@modernpoacher/sprockets/components/error-message'
+
+  export default class FieldsetErrorMessage extends ErrorMessage {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/fieldset/title' {
+  import Title from '@modernpoacher/sprockets/components/title'
+
+  export default class FieldsetTitle extends Title {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/fieldset/group' {
+  import Group from '@modernpoacher/sprockets/components/group'
+
+  export default class FieldsetGroup extends Group {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets/fieldset' {
+  import Sprocket from '@modernpoacher/sprockets/sprockets'
+
+  export default class FieldsetSprocket extends Sprocket {}
+}
+
+declare module '@modernpoacher/sprockets/sprockets' {
+  import React from 'react'
+
+  export type SprocketProps = {
+    title: string,
+    onChange: SprocketsTypes.OnChangeType,
+    groupRef: object,
+    children: React.JSX.Element | React.JSX.Element[]
+  }
+
+  export default class Sprocket extends React.Component<SprocketProps> {}
+}
+
+declare module '@modernpoacher/sprockets' {
+  export { default as CheckAnswersSprocket } from '@modernpoacher/sprockets/sprockets/check-answers'
+  export { default as ErrorSummarySprocket } from '@modernpoacher/sprockets/sprockets/error-summary'
+  export { default as FieldsetSprocket } from '@modernpoacher/sprockets/sprockets/fieldset'
+}

package/src/index.mjs

@@ -0,0 +1,19 @@
+import debug from 'debug'
+
+import CheckAnswersSprocket from './sprockets/check-answers/index.cjs'
+import ErrorSummarySprocket from './sprockets/error-summary/index.cjs'
+import FieldsetSprocket from './sprockets/fieldset/index.cjs'
+
+const log = debug('@modernpoacher/sprockets')
+
+log('`sprockets` is awake')
+
+export { default as CheckAnswersSprocket } from './sprockets/check-answers/index.cjs'
+export { default as ErrorSummarySprocket } from './sprockets/error-summary/index.cjs'
+export { default as FieldsetSprocket } from './sprockets/fieldset/index.cjs'
+
+export default {
+  CheckAnswersSprocket,
+  ErrorSummarySprocket,
+  FieldsetSprocket
+}

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

@@ -0,0 +1,13 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/answer-item')
+
+log('`sprockets` is awake')
+
+module.exports = require('./answer-item.jsx')

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import AnswerTitle from './answer-title.cjs'
+import AnswerValue from './answer-value.cjs'
+import ChangeAnswer from './change-answer.cjs'
+
+export default function AnswerItem ({ answer: { title, value }, changeAnswer: { href, text, visuallyHiddenText } }) {
+  return (
+    <div className='answer'>
+      <AnswerTitle title={title} />
+      <AnswerValue value={value} />
+      <ChangeAnswer
+        href={href}
+        text={text}
+        visuallyHiddenText={visuallyHiddenText}
+      />
+    </div>
+  )
+}
+
+AnswerItem.propTypes = {
+  answer: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(
+        PropTypes.string
+      )
+    ]).isRequired
+  }),
+  changeAnswer: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    visuallyHiddenText: PropTypes.string.isRequired
+  })
+}

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

@@ -0,0 +1,13 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/answer-title')
+
+log('`sprockets` is awake')
+
+module.exports = require('./answer-title.jsx')

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group')
+
+/**
+ * @param {SprocketsTypes.AnswerDefinitionType}
+ * @returns {React.JSX.Element}
+ */
+export default function AnswerTitle ({ title }) {
+  log('AnswerTitle')
+
+  return (
+    <dt className='answer-title'>
+      {title}
+    </dt>
+  )
+}
+
+AnswerTitle.propTypes = {
+  title: PropTypes.string.isRequired
+}

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

@@ -0,0 +1,13 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/answer-value')
+
+log('`sprockets` is awake')
+
+module.exports = require('./answer-value.jsx')

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group')
+
+/**
+ * @param {string | string[]}
+ * @returns {string | string[]}
+ */
+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)
+        }, [])
+    )
+  }
+
+  return String(value)
+}
+
+/**
+ * @param {SprocketsTypes.AnswerDefinitionType}
+ * @returns {React.JSX.Element}
+ */
+export default function AnswerValue ({ value }) {
+  log('AnswerValue')
+
+  return (
+    <dd className='answer-value'>
+      {getAnswerValue(value)}
+    </dd>
+  )
+}
+
+AnswerValue.propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(
+      PropTypes.string
+    )
+  ]).isRequired
+}

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

@@ -0,0 +1,13 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/change-answer')
+
+log('`sprockets` is awake')
+
+module.exports = require('./change-answer.jsx')

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+import {
+  Link
+} from 'react-router-dom'
+
+import TextContent from '@modernpoacher/sprockets/components/common/text-content'
+
+import VisuallyHiddenText from './visually-hidden-text.cjs'
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/change-answer')
+
+/**
+ * @param {SprocketsTypes.AnswerDefinitionType}
+ * @returns {React.JSX.Element}
+ */
+export default function ChangeAnswer ({ href, text, visuallyHiddenText }) {
+  log('ChangeAnswer')
+
+  return (
+    <dd className='change-answer'>
+      <Link to={href}>
+        <TextContent textContent={text} />
+        {String.fromCharCode(32)}
+        <VisuallyHiddenText visuallyHiddenText={visuallyHiddenText} />
+      </Link>
+    </dd>
+  )
+}
+
+ChangeAnswer.propTypes = {
+  href: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  visuallyHiddenText: PropTypes.string.isRequired
+}

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

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

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

@@ -0,0 +1,93 @@
+/**
+ * CheckAnswersGroup component
+ *
+ * @typedef {import('@modernpoacher/sprockets/components/group').GroupProps} GroupProps
+ *
+ * Group state
+ *
+ * @typedef {Object} GroupState
+ * @property {{}} [children]
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import classnames from 'classnames'
+
+import Group from '@modernpoacher/sprockets/components/group'
+
+export default class CheckAnswersGroup extends Group {
+  /**
+   * @type {GroupState}
+   */
+  state = {}
+
+  getClassName () {
+    return classnames(super.getClassName(), 'check-answers')
+  }
+
+  /**
+   *  Compare latest 'props' with 'state' for changes to 'children'
+   *
+   * @param {GroupProps} props   Latest props
+   * @param {GroupState} state   Current state
+   * @returns {{children: {}}}
+   */
+  static getDerivedStateFromProps ({ children: c }, { children: C }) {
+    return {
+      children: (c !== C) ? c : C
+    }
+  }
+
+  /**
+   * Compare latest 'props' with 'state' for changes to 'children'
+   *
+   * @param {GroupProps} props   Latest props
+   * @param {GroupState} state   Current state
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      children: c
+    } = state
+
+    const {
+      children: C
+    } = this.state
+
+    return (c !== C)
+  }
+
+  render () {
+    const {
+      groupRef,
+      children
+    } = this.props
+
+    if (children) {
+      return (
+        <dl
+          className={this.getClassName()}
+          ref={groupRef}>
+          {children}
+        </dl>
+      )
+    }
+
+    return null
+  }
+}
+
+CheckAnswersGroup.propTypes = {
+  ...Group.propTypes,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ])
+}
+
+CheckAnswersGroup.defaultProps = {
+  ...Group.defaultProps
+}

package/src/sprockets/check-answers/group/visually-hidden-text.cjs

@@ -0,0 +1,13 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/visually-hidden-text')
+
+log('`sprockets` is awake')
+
+module.exports = require('./visually-hidden-text.jsx')

package/src/sprockets/check-answers/group/visually-hidden-text.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group')
+
+export default function VisuallyHiddenText ({ visuallyHiddenText }) {
+  log('VisuallyHiddenText')
+
+  if (visuallyHiddenText) {
+    return (
+      <span className='visually-hidden-text'>
+        {visuallyHiddenText.toLowerCase()}
+      </span>
+    )
+  }
+
+  return null
+}
+
+VisuallyHiddenText.propTypes = {
+  visuallyHiddenText: PropTypes.string
+}
+
+VisuallyHiddenText.defaultProps = {
+  visuallyHiddenText: ''
+}

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

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

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

@@ -0,0 +1,86 @@
+/**
+ * CheckAnswersSprocket component
+ *
+ * @typedef {import('@modernpoacher/sprockets/sprockets').SprocketProps} SprocketProps
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import classnames from 'classnames'
+
+import Sprocket from '@modernpoacher/sprockets/sprockets'
+import Title from './title/index.jsx'
+import Group from './group/index.jsx'
+
+export default class CheckAnswersSprocket extends Sprocket {
+  getClassName () {
+    return classnames(super.getClassName(), 'check-answers')
+  }
+
+  /**
+   * @param {SprocketProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.children !== this.props.children)
+    )
+  }
+
+  renderTitle () {
+    const {
+      title
+    } = this.props
+
+    return (
+      <Title
+        title={title}
+      />
+    )
+  }
+
+  renderGroup () {
+    const {
+      children
+    } = this.props
+
+    return (
+      <Group>
+        {children}
+      </Group>
+    )
+  }
+
+  render () {
+    const {
+      children
+    } = this.props
+
+    if (children) {
+      return (
+        <div className={this.getClassName()}>
+          {this.renderTitle()}
+          {this.renderGroup()}
+        </div>
+      )
+    }
+
+    return null
+  }
+}
+
+CheckAnswersSprocket.propTypes = {
+  ...Sprocket.propTypes,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ])
+}
+
+CheckAnswersSprocket.defaultProps = {
+  ...Sprocket.defaultProps
+}

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

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/check-answers/title')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component