shinkansen-sprockets 1.0.28

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "shinkansen-sprockets",
+  "version": "1.0.28",
+  "description": "Shinkansen Sprockets",
+  "keywords": [
+    "Shinkansen",
+    "Sprockets",
+    "Zashiki Karakuri",
+    "Zashiki",
+    "Karakuri",
+    "React"
+  ],
+  "main": "./index.js",
+  "author": "Jonathan Perry for Modern Poacher Limited <modernpoacher@modernpoacher.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12.19.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com/modernpoacher/shinkansen-sprockets.git"
+  },
+  "scripts": {
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build",
+    "prebuild": "npm run clean",
+    "build": "cross-env DEBUG=shinkansen-sprockets npm run babel -- --ignore \"**/__tests__/**\" && npm run gulp",
+    "build:watch": "npm run gulp -- build:watch",
+    "watch": "cross-env DEBUG=shinkansen-sprockets concurrently -r \"npm run babel:watch\" \"npm run build:watch\"",
+    "clean": "rimraf lib",
+    "transform": "npm run gulp -- transform",
+    "transform:watch": "npm run gulp -- transform:watch",
+    "babel": "babel src -d lib",
+    "babel:watch": "npm run babel -- -w",
+    "gulp": "bash gulp.sh --color",
+    "lint": "eslint . .storybook",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "cross-env NODE_ENV=test jest --collect-coverage false --verbose --run-in-band",
+    "storybook": "npm run build && npm run transform && start-storybook -p 6007",
+    "pre-commit": "npm run lint && npm test && npm run build && npm run transform && git add lib .storybook"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "debug": "^4.3.2",
+    "immutable": "3.8.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.15.4",
+    "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.4",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-export-default-from": "^7.14.5",
+    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
+    "@modernpoacher/design-system": "0.0.383",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "autoprefixer": "^10.3.4",
+    "babel-jest": "^27.2.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "concurrently": "^6.2.1",
+    "core-js": "^3.17.3",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.0.8",
+    "dart-sass": "^1.25.0",
+    "del": "^6.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.25.2",
+    "glob-all": "^3.2.1",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-css-purge": "^3.0.9",
+    "gulp-debug": "^4.0.0",
+    "gulp-postcss": "^9.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.0.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "husky": "^7.0.2",
+    "jest": "^27.2.0",
+    "postcss": "^8.3.6",
+    "postcss-easy-import": "^3.0.0",
+    "postcss-map": "^0.11.0",
+    "postcss-normalize": "^10.0.1",
+    "postcss-scss": "^4.0.0",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
+    "react-test-renderer": "16.14.0",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
+    "vinyl-paths": "3.0.1"
+  }
+}

package/src/components/common/text-content/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const TextContent = ({ textContent }) => (
+  <span className='text-content'>
+    {textContent}
+  </span>
+)
+
+TextContent.propTypes = {
+  textContent: PropTypes.string.isRequired
+}
+
+export default TextContent

package/src/components/description/fieldset/index.js

@@ -0,0 +1,19 @@
+/**
+ * FieldsetDescription component
+ */
+import classnames from 'classnames'
+import Description from 'shinkansen-sprockets/components/description'
+
+export default class FieldsetDescription extends Description {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+}
+
+FieldsetDescription.propTypes = {
+  ...Description.propTypes
+}
+
+FieldsetDescription.defaultProps = {
+  ...Description.defaultProps
+}

package/src/components/description/index.js

@@ -0,0 +1,61 @@
+/**
+ * Description component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import TextContent from 'shinkansen-sprockets/components/common/text-content'
+
+export default class Description extends Component {
+  hasTextContent () {
+    const { description } = this.props
+
+    return !!description
+  }
+
+  getTextContent () {
+    const { description } = this.props
+
+    return description
+  }
+
+  getClassName () {
+    return 'description'
+  }
+
+  shouldComponentUpdate (props) {
+    return (
+      (props.description !== this.props.description)
+    )
+  }
+
+  renderTextContent () {
+    if (this.hasTextContent()) {
+      const textContent = this.getTextContent()
+
+      return (
+        <TextContent textContent={textContent} />
+      )
+    }
+
+    return null
+  }
+
+  render () {
+    const { description } = this.props
+
+    if (description) {
+      return (
+        <span className={this.getClassName()}>
+          {this.renderTextContent()}
+        </span>
+      )
+    }
+
+    return null
+  }
+}
+
+Description.propTypes = {
+  description: PropTypes.string
+}

package/src/components/error-message/fieldset/index.js

@@ -0,0 +1,19 @@
+/**
+ * FieldsetErrorMessage component
+ */
+import classnames from 'classnames'
+import ErrorMessage from 'shinkansen-sprockets/components/error-message'
+
+export default class FieldsetErrorMessage extends ErrorMessage {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+}
+
+FieldsetErrorMessage.propTypes = {
+  ...ErrorMessage.propTypes
+}
+
+FieldsetErrorMessage.defaultProps = {
+  ...ErrorMessage.defaultProps
+}

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

@@ -0,0 +1,103 @@
+/**
+ * ErrorMessage component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Immutable from 'immutable'
+
+import transform from 'shinkansen-sprockets/transformers/error-message'
+
+import TextContent from 'shinkansen-sprockets/components/common/text-content'
+
+export default class ErrorMessage extends Component {
+  state = { errorMessage: Immutable.Map() }
+
+  hasTextContent () {
+    const { errorMessage } = this.props
+
+    const {
+      text
+    } = transform(errorMessage)
+
+    return !!text
+  }
+
+  getTextContent () {
+    const { errorMessage } = this.props
+    const {
+      text
+    } = transform(errorMessage)
+
+    return text
+  }
+
+  getClassName () {
+    return 'error-message'
+  }
+
+  /**
+   *  Convert latest 'props' to an Immutable.Map() and store in 'state'
+   *
+   *  @param {Object} props   Latest props
+   *  @param {Object} state   Current state
+   */
+  static getDerivedStateFromProps ({ errorMessage }, { errorMessage: E }) {
+    const e = Immutable.Map(errorMessage)
+
+    return {
+      errorMessage: Immutable.is(E, e) ? E : e
+    }
+  }
+
+  /**
+   *  Compare latest 'props' via 'state' for changes to 'errorMessage'
+   *
+   *  @param {Object} props   Latest props
+   *  @param {Object} state   Latest state
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      errorMessage: e
+    } = state
+
+    const {
+      errorMessage: E
+    } = this.state
+
+    return (e !== E)
+  }
+
+  renderTextContent () {
+    if (this.hasTextContent()) {
+      const textContent = this.getTextContent()
+
+      return (
+        <TextContent textContent={textContent} />
+      )
+    }
+
+    return null
+  }
+
+  render () {
+    const { errorMessage } = this.props
+
+    if (errorMessage) {
+      return (
+        <span className={this.getClassName()}>
+          {this.renderTextContent()}
+        </span>
+      )
+    }
+
+    return null
+  }
+}
+
+ErrorMessage.propTypes = {
+  errorMessage: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    params: PropTypes.shape().isRequired,
+    uri: PropTypes.string.isRequired
+  })
+}

package/src/components/group/check-answers/answer-title.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+const log = debug('shinkansen-sprockets:components:group:check-answers')
+
+export default function SummaryTitle ({ answer: { title } }) {
+  log('SummaryTitle')
+
+  return (
+    <dt className='answer-title'>
+      {title}
+    </dt>
+  )
+}
+
+SummaryTitle.propTypes = {
+  answer: PropTypes.shape({
+    title: PropTypes.string.isRequired
+  }).isRequired
+}

package/src/components/group/check-answers/answer-value.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+const log = debug('shinkansen-sprockets:components:group:check-answers')
+
+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)
+}
+
+export default function SummaryValue ({ answer: { value } }) {
+  log('SummaryValue')
+
+  return (
+    <dd className='answer-value'>
+      {getAnswerValue(value)}
+    </dd>
+  )
+}
+
+SummaryValue.propTypes = {
+  answer: PropTypes.shape({
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(
+        PropTypes.string
+      )
+    ]).isRequired
+  }).isRequired
+}

package/src/components/group/check-answers/change-answer.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+import {
+  Link
+} from 'react-router-dom'
+
+import TextContent from 'shinkansen-sprockets/components/common/text-content'
+
+import VisuallyHiddenText from './visually-hidden-text'
+
+const log = debug('shinkansen-sprockets:components:group:check-answers')
+
+export default function ChangeAnswer ({ 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 = {
+  changeAnswer: PropTypes.shape({
+    href: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    visuallyHiddenText: PropTypes.string.isRequired
+  }).isRequired
+}

package/src/components/group/check-answers/index.js

@@ -0,0 +1,104 @@
+/**
+ * CheckAnswersGroup component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import Immutable from 'immutable'
+import classnames from 'classnames'
+
+import debug from 'debug'
+
+import Group from 'shinkansen-sprockets/components/group'
+
+import {
+  getKey
+} from 'shinkansen-sprockets/transformers/common'
+
+import AnswerTitle from './answer-title'
+import AnswerValue from './answer-value'
+import ChangeAnswer from './change-answer'
+
+const log = debug('shinkansen-sprockets:components:group:check-answers')
+
+/* eslint-disable-next-line react/prop-types */
+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} />
+      <ChangeAnswer
+        changeAnswer={{ ...changeAnswer, href, text }}
+      />
+    </div>
+  )
+}
+
+export default class CheckAnswersGroup extends Group {
+  state = {}
+
+  getClassName () {
+    return classnames(super.getClassName(), 'check-answers')
+  }
+
+  /**
+   *  Convert latest 'props' to an Immutable.Map() and store in 'state'
+   *
+   *  @param {Object} props   Latest props
+   *  @param {Object} state   Current state
+   */
+  static getDerivedStateFromProps ({ checkAnswers }, { checkAnswers: C }) {
+    const c = Immutable.Map(checkAnswers)
+
+    return {
+      checkAnswers: Immutable.is(C, c) ? C : c
+    }
+  }
+
+  /**
+   *  Compare latest 'props' via 'state' for changes to 'checkAnswers'
+   *
+   *  @param {Object} props   Latest props
+   *  @param {Object} state   Latest state
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      checkAnswers: c
+    } = state
+
+    const {
+      checkAnswers: C
+    } = this.state
+
+    return (c !== C)
+  }
+
+  render () {
+    const {
+      checkAnswers
+    } = this.props
+
+    if (checkAnswers.length) {
+      return (
+        <dl
+          className={this.getClassName()}
+          ref={this.setDOMNode}>
+          {checkAnswers.map(render)}
+        </dl>
+      )
+    }
+
+    return null
+  }
+}
+
+CheckAnswersGroup.propTypes = {
+  ...Group.propTypes,
+  checkAnswers: PropTypes.array
+}
+
+CheckAnswersGroup.defaultProps = {
+  ...Group.defaultProps,
+  checkAnswers: []
+}

package/src/components/group/check-answers/visually-hidden-text.js

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

package/src/components/group/error-summary/index.js

@@ -0,0 +1,106 @@
+/**
+ * ErrorSummaryGroup component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import Immutable from 'immutable'
+import classnames from 'classnames'
+
+import debug from 'debug'
+
+import Group from 'shinkansen-sprockets/components/group'
+
+import transform from 'shinkansen-sprockets/transformers/error-summary'
+import {
+  getKey
+} from 'shinkansen-sprockets/transformers/common'
+
+import TextContent from 'shinkansen-sprockets/components/common/text-content'
+
+const log = debug('shinkansen-sprockets:components:group:error-summary')
+
+/* eslint-disable-next-line react/prop-types */
+function render (error, index) {
+  log('render')
+
+  const {
+    href,
+    text
+  } = transform(error)
+
+  return (
+    <li key={getKey(href, text, index)} className='error'>
+      <a href={href}>
+        <TextContent textContent={text} />
+      </a>
+    </li>
+  )
+}
+
+export default class ErrorSummaryGroup extends Group {
+  state = {}
+
+  getClassName () {
+    return classnames(super.getClassName(), 'error-summary')
+  }
+
+  /**
+   *  Convert latest 'props' to an Immutable.Map() and store in 'state'
+   *
+   *  @param {Object} props   Latest props
+   *  @param {Object} state   Current state
+   */
+  static getDerivedStateFromProps ({ errorSummary }, { errorSummary: E }) {
+    const e = Immutable.Map(errorSummary)
+
+    return {
+      errorSummary: Immutable.is(E, e) ? E : e
+    }
+  }
+
+  /**
+   *  Compare latest 'props' via 'state' for changes to 'errorSummary'
+   *
+   *  @param {Object} props   Latest props
+   *  @param {Object} state   Latest state
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      errorSummary: e
+    } = state
+
+    const {
+      errorSummary: E
+    } = this.state
+
+    return (e !== E)
+  }
+
+  render () {
+    const {
+      errorSummary
+    } = this.props
+
+    if (errorSummary.length) {
+      return (
+        <ul
+          className={this.getClassName()}
+          ref={this.setDOMNode}>
+          {errorSummary.map(render)}
+        </ul>
+      )
+    }
+
+    return null
+  }
+}
+
+ErrorSummaryGroup.propTypes = {
+  ...Group.propTypes,
+  errorSummary: PropTypes.array
+}
+
+ErrorSummaryGroup.defaultProps = {
+  ...Group.defaultProps,
+  errorSummary: []
+}

package/src/components/group/fieldset/index.js

@@ -0,0 +1,19 @@
+/**
+ * FieldsetGroup component
+ */
+import classnames from 'classnames'
+import Group from 'shinkansen-sprockets/components/group'
+
+export default class FieldsetGroup extends Group {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+}
+
+FieldsetGroup.propTypes = {
+  ...Group.propTypes
+}
+
+FieldsetGroup.defaultProps = {
+  ...Group.defaultProps
+}