shinkansen-pinion 1.0.36

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "shinkansen-pinion",
+  "version": "1.0.36",
+  "description": "Shinkansen Pinion",
+  "keywords": [
+    "Shinkansen",
+    "Pinion",
+    "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-pinion.git"
+  },
+  "scripts": {
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build",
+    "prebuild": "npm run clean",
+    "build": "cross-env DEBUG=shinkansen-pinion npm run babel -- --ignore \"**/__tests__/**\" && npm run gulp",
+    "build:watch": "npm run gulp -- build:watch",
+    "watch": "cross-env DEBUG=shinkansen-pinion 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 .",
+    "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 6008",
+    "build-storybook": "build-storybook",
+    "pre-commit": "npm run lint && npm test && npm run build && npm run transform && git add lib .storybook"
+  },
+  "dependencies": {
+    "debug": "^4.3.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/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
+    "@modernpoacher/design-system": "0.0.383",
+    "autoprefixer": "^10.3.4",
+    "babel-jest": "^27.2.0",
+    "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",
+    "shinkansen-cogs": "1.5.26",
+    "shinkansen-rails": "1.0.18",
+    "shinkansen-signals": "1.1.2",
+    "shinkansen-sprockets": "1.0.30",
+    "vinyl-paths": "3.0.1"
+  }
+}

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

@@ -0,0 +1,5 @@
+import {
+  CheckAnswersSprocket
+} from 'shinkansen-sprockets'
+
+export default CheckAnswersSprocket

package/src/components/common/index.js

@@ -0,0 +1 @@
+export * as textContent from './text-content'

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/error-summary/index.js

@@ -0,0 +1,5 @@
+import {
+  ErrorSummarySprocket
+} from 'shinkansen-sprockets'
+
+export default ErrorSummarySprocket

package/src/components/index.js

@@ -0,0 +1,4 @@
+export CheckAnswers from './check-answers'
+export * as common from './common'
+export ErrorSummary from './error-summary'
+export Pinion from './pinion'

package/src/components/pinion/index.js

@@ -0,0 +1,404 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import debug from 'debug'
+
+import {
+  FieldsetSprocket
+} from 'shinkansen-sprockets'
+
+import {
+  RadioCog,
+  SelectCog,
+  TextCog
+} from 'shinkansen-cogs'
+
+import hasEnum from 'shinkansen-pinion/transformers/common/has-enum'
+import hasAnyOf from 'shinkansen-pinion/transformers/common/has-any-of'
+import hasOneOf from 'shinkansen-pinion/transformers/common/has-one-of'
+import hasComponent from 'shinkansen-pinion/transformers/common/has-component'
+import getComponent from 'shinkansen-pinion/transformers/common/get-component'
+import {
+  getError
+} from 'shinkansen-pinion/transformers/error-message'
+
+const log = debug('shinkansen-pinion')
+
+log('`pinion` is awake')
+
+function onChange () {
+  /* */
+}
+
+const getKey = (value, index) => `${value}-${index}`
+const getDefaultValue = (field) => Reflect.has(field, 'defaultValue') ? Reflect.get(field, 'defaultValue') : ''
+const getValue = (field) => Reflect.has(field, 'value') ? Reflect.get(field, 'value') : getDefaultValue(field)
+
+/* eslint-disable-next-line react/prop-types */
+export function renderToRadiosForEnum ({ items = [], selectedItems = [], uri }, { title, description, enum: { id, name = id, isRequired = false } }, { components, errors }, onChange) {
+  log('renderToRadiosForEnum')
+
+  return (
+    <FieldsetSprocket
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}>
+      {items.map((value, index) => {
+        const key = getKey(uri, index)
+
+        return (
+          <RadioCog
+            key={key}
+            title={String(value)}
+            value={String(index)}
+            id={key}
+            name={name}
+            onChange={onChange}
+            required={isRequired}
+            checked={selectedItems.includes(index)}
+          />
+        )
+      })}
+    </FieldsetSprocket>
+  )
+}
+
+/* eslint-disable-next-line react/prop-types */
+export function renderToRadiosForAnyOf ({ items = [], selectedItems = [], uri }, { title, description, anyOf: { id, name = id, isRequired = false } }, { components, errors }, onChange) {
+  log('renderToRadiosForAnyOf')
+
+  return (
+    <FieldsetSprocket
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}>
+      {items.map(({ meta: { uri }, elements: { title, description, field: { id } } }, index) => (
+        <RadioCog
+          key={uri}
+          title={title}
+          description={description}
+          value={String(index)}
+          id={id}
+          name={name}
+          onChange={onChange}
+          required={isRequired}
+          checked={selectedItems.includes(index)}
+        />
+      ))}
+    </FieldsetSprocket>
+  )
+}
+
+/* eslint-disable-next-line react/prop-types */
+export function renderToRadiosForOneOf ({ items = [], selectedItems = [], uri }, { title, description, oneOf: { id, name = id, isRequired = false } }, { components, errors }, onChange) {
+  log('renderToRadiosForOneOf')
+
+  return (
+    <FieldsetSprocket
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}>
+      {items.map(({ meta: { uri }, elements: { title, description, field: { id } } }, index) => (
+        <RadioCog
+          key={uri}
+          title={title}
+          description={description}
+          value={String(index)}
+          id={id}
+          name={name}
+          onChange={onChange}
+          required={isRequired}
+          checked={selectedItems.includes(index)}
+        />
+      ))}
+    </FieldsetSprocket>
+  )
+}
+
+/* eslint-disable-next-line react/prop-types */
+export function renderToSelectForEnum ({ items = [], selectedItems = [], uri }, { title, description, enum: { id, name = id, isRequired = false } }, { components, errors }, onChange) {
+  log('renderToSelectForEnum')
+
+  return (
+    <SelectCog
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}
+      name={name}
+      onChange={onChange}
+      required={isRequired}>
+      {items.map((value, index) => (
+        <option
+          key={getKey(uri, index)}
+          value={String(index)}
+          selected={selectedItems.includes(index)}>
+          {value}
+        </option>
+      ))}
+    </SelectCog>
+  )
+}
+
+/* eslint-disable-next-line react/prop-types */
+export function renderToSelectForAnyOf ({ items = [], selectedItems = [], uri }, { title, description, anyOf: { id, name = id, isRequired = false } }, { components, errors }, onChange) {
+  log('renderToSelectForAnyOf')
+
+  return (
+    <SelectCog
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}
+      name={name}
+      onChange={onChange}
+      required={isRequired}>
+      {items.map(({ meta: { uri }, elements: { title } }, index) => (
+        <option
+          key={uri}
+          value={String(index)}
+          selected={selectedItems.includes(index)}>
+          {title}
+        </option>
+      ))}
+    </SelectCog>
+  )
+}
+
+/* eslint-disable-next-line react/prop-types */
+export function renderToSelectForOneOf ({ items = [], selectedItems = [], uri }, { title, description, oneOf: { id, name = id, isRequired = false } }, { components, errors }, onChange) {
+  log('renderToSelectForOneOf')
+
+  return (
+    <SelectCog
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}
+      name={name}
+      onChange={onChange}
+      required={isRequired}>
+      {items.map(({ meta: { uri }, elements: { title } }, index) => (
+        <option
+          key={uri}
+          value={String(index)}
+          selected={selectedItems.includes(index)}>
+          {title}
+        </option>
+      ))}
+    </SelectCog>
+  )
+}
+
+export function renderToField (meta, elements, params, onChange) {
+  log('renderToField')
+
+  const {
+    uri
+  } = meta
+
+  const {
+    title,
+    description,
+    field: {
+      id,
+      isRequired = false,
+      ...field
+    } = {}
+  } = elements
+
+  const {
+    errors
+  } = params
+
+  return (
+    <TextCog
+      title={title}
+      description={description}
+      name={id}
+      value={getValue(field)}
+      errorMessage={getError(errors, uri)}
+      required={isRequired}
+      onChange={onChange}
+    />
+  )
+}
+
+export function GroupComponent ({ component, meta, elements, params, onChange }) {
+
+}
+
+export function FieldComponent ({ component, meta, elements, params, onChange }) {
+
+}
+
+export function Group ({ meta, elements, params, onChange }) {
+  log('Group')
+
+  const {
+    uri
+  } = meta
+
+  const {
+    title,
+    description,
+    fields = []
+  } = elements
+
+  const {
+    errors
+  } = params
+
+  return (
+    <FieldsetSprocket
+      title={title}
+      description={description}
+      errorMessage={getError(errors, uri)}>
+      {fields.map((pinion) => {
+        const {
+          meta: {
+            uri
+          } = {}
+        } = pinion
+
+        return (
+          <Pinion
+            key={uri}
+            pinion={pinion}
+            params={params}
+            onChange={onChange}
+          />
+        )
+      })}
+    </FieldsetSprocket>
+  )
+}
+
+Group.propTypes = {
+  meta: PropTypes.shape().isRequired,
+  elements: PropTypes.shape().isRequired,
+  params: PropTypes.shape().isRequired,
+  onChange: PropTypes.func
+}
+
+Group.defaultProps = {
+  onChange
+}
+
+export function Field ({ meta, elements, params, onChange }) {
+  log('Field')
+
+  if (hasEnum(elements)) {
+    log('Field (`enum`)')
+
+    return renderToRadiosForEnum(meta, elements, params, onChange)
+  } else {
+    if (hasAnyOf(elements)) {
+      log('Field (`anyOf`)')
+
+      return renderToRadiosForAnyOf(meta, elements, params, onChange)
+    } else {
+      if (hasOneOf(elements)) {
+        log('Field (`oneOf`)')
+
+        return renderToRadiosForOneOf(meta, elements, params, onChange)
+      } else {
+        log('Field (`field`)')
+
+        return renderToField(meta, elements, params, onChange)
+      }
+    }
+  }
+}
+
+Field.propTypes = {
+  meta: PropTypes.shape().isRequired,
+  elements: PropTypes.shape().isRequired,
+  params: PropTypes.shape().isRequired,
+  onChange: PropTypes.func
+}
+
+Field.defaultProps = {
+  onChange
+}
+
+export function renderGroup ({ meta, elements }, params, onChange) { // eslint-disable-line
+  log('renderGroup')
+
+  if (hasComponent(meta)) {
+    const component = getComponent(meta)
+
+    return (
+      <GroupComponent
+        component={component}
+        meta={meta}
+        elements={elements}
+        params={params}
+        onChange={onChange}
+      />
+    )
+  }
+
+  return (
+    <Group
+      meta={meta}
+      elements={elements}
+      params={params}
+      onChange={onChange}
+    />
+  )
+}
+
+export function renderField ({ meta, elements }, params, onChange) { // eslint-disable-line
+  log('renderField')
+
+  if (hasComponent(meta)) {
+    const component = getComponent(meta)
+
+    return (
+      <FieldComponent
+        component={component}
+        meta={meta}
+        elements={elements}
+        params={params}
+        onChange={onChange}
+      />
+    )
+  }
+
+  return (
+    <Field
+      meta={meta}
+      elements={elements}
+      params={params}
+      onChange={onChange}
+    />
+  )
+}
+
+export default function Pinion ({ pinion, params, onChange }) {
+  log('Pinion')
+
+  const {
+    meta: {
+      type
+    } = {}
+  } = pinion
+
+  return (type === 'object' || type === 'array')
+    ? renderGroup(pinion, params, onChange)
+    : renderField(pinion, params, onChange)
+}
+
+Pinion.propTypes = {
+  pinion: PropTypes.shape({
+    meta: PropTypes.shape().isRequired,
+    elements: PropTypes.shape().isRequired
+  }).isRequired,
+  params: PropTypes.shape({
+    components: PropTypes.shape(),
+    errors: PropTypes.array
+  }),
+  onChange: PropTypes.func
+}
+
+Pinion.defaultProps = {
+  params: {},
+  onChange
+}

package/src/index.js

@@ -0,0 +1,10 @@
+import debug from 'debug'
+
+const log = debug('shinkansen-pinion')
+
+log('`pinion` is awake')
+
+export * as components from './components'
+export * as transformers from './transformers'
+
+export Pinion from './components/pinion'

package/src/transformers/check-answers/get-answer-title.js

@@ -0,0 +1,11 @@
+import debug from 'debug'
+
+import transformAnswerTitle from './transform-answer-title'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getAnswerTitle ({ elements = {} }) {
+  log('getAnswerTitle')
+
+  return transformAnswerTitle(elements)
+}

package/src/transformers/check-answers/get-answer-value-for-type-array.js

@@ -0,0 +1,14 @@
+import debug from 'debug'
+
+import transformAnswerValue from './transform-answer-value'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getAnswerValueForTypeArray (group = []) {
+  log('getAnswerValueForTypeArray')
+
+  return (
+    group
+      .map(({ elements = {} }) => transformAnswerValue(elements))
+  )
+}

package/src/transformers/check-answers/get-answer-value-for-type-object.js

@@ -0,0 +1,14 @@
+import debug from 'debug'
+
+import transformAnswerValue from './transform-answer-value'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getAnswerValueForTypeObject (group = []) {
+  log('getAnswerValueForTypeObject')
+
+  return (
+    group
+      .map(({ elements = {} }) => transformAnswerValue(elements))
+  )
+}

package/src/transformers/check-answers/get-answer-value.js

@@ -0,0 +1,11 @@
+import debug from 'debug'
+
+import transformAnswerValue from './transform-answer-value'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getAnswerValue ({ elements = {} }) {
+  log('getAnswerValue')
+
+  return transformAnswerValue(elements)
+}

package/src/transformers/check-answers/get-any-of-selected-item-value.js

@@ -0,0 +1,13 @@
+import debug from 'debug'
+
+import toAnswerValue from './to-answer-value'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getAnyOfSelectedItemValue (items = [], [selectedItem] = []) {
+  log('getAnyOfSelectedItemValue')
+
+  return (Reflect.has(items, selectedItem))
+    ? toAnswerValue(Reflect.get(items, selectedItem)) // || 'Not answered'
+    : '' // 'Not answered'
+}

package/src/transformers/check-answers/get-any-of-selected-items-value.js

@@ -0,0 +1,17 @@
+import debug from 'debug'
+
+import toAnswerValue from './to-answer-value'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getAnyOfSelectedItemsValue (items = [], selectedItems = []) {
+  log('getAnyOfSelectedItemsValue')
+
+  return (
+    selectedItems.reduce((accumulator, selectedItem) => (
+      (Reflect.has(items, selectedItem))
+        ? accumulator.concat(toAnswerValue(Reflect.get(items, selectedItem)))
+        : accumulator
+    ), '') // || 'Not answered'
+  )
+}

package/src/transformers/check-answers/get-change-answer.js

@@ -0,0 +1,16 @@
+import debug from 'debug'
+
+import getResourceUrl from 'shinkansen-pinion/transformers/common/get-resource-url'
+import getVisuallyHiddenText from './get-visually-hidden-text'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getChangeAnswer (answer, resource) {
+  log('getChangeAnswer')
+
+  return {
+    href: getResourceUrl(resource),
+    text: 'Change',
+    visuallyHiddenText: getVisuallyHiddenText(answer)
+  }
+}

package/src/transformers/check-answers/get-enum-selected-item-value.js

@@ -0,0 +1,13 @@
+import debug from 'debug'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getEnumSelectedItemValue (items = [], [selectedItem] = []) {
+  log('getEnumSelectedItemValue')
+
+  return (
+    Reflect.has(items, selectedItem)
+      ? String(Reflect.get(items, selectedItem))
+      : '' // 'Not answered'
+  )
+}

package/src/transformers/check-answers/get-enum-selected-items-value.js

@@ -0,0 +1,15 @@
+import debug from 'debug'
+
+const log = debug('shinkansen-pinion:transformers:check-answers')
+
+export default function getEnumSelectedItemsValue (items = [], selectedItems = []) {
+  log('getEnumSelectedItemsValue')
+
+  return (
+    selectedItems.reduce((accumulator, selectedItem) => (
+      (Reflect.has(items, selectedItem))
+        ? accumulator.concat(Reflect.get(items, selectedItem))
+        : accumulator
+    ), '') // || 'Not answered'
+  )
+}