@modernpoacher/sprockets 0.0.5

package/README.md

@@ -0,0 +1,11 @@
+## `@modernpoacher/sprockets`
+
+# Sprockets
+
+_Sprockets_ are React components for input groups.
+
+_Sprockets_ are composed from _Cogs_.
+
+## See also
+
+- [Cogs](https://github.com/modernpoacher/cogs)

package/babel.config.cjs

@@ -0,0 +1,99 @@
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets')
+
+const {
+  env: {
+    NODE_ENV = 'development'
+  }
+} = process
+
+log('`sprockets` is awake')
+
+function env () {
+  log({ NODE_ENV })
+
+  return (
+    NODE_ENV === 'production'
+  )
+}
+
+const presets = [
+  [
+    '@babel/env', {
+      targets: {
+        node: 'current',
+        browsers: [
+          'last 4 versions',
+          'safari >= 9',
+          'ios >= 8',
+          'ie >= 9',
+          '> 2%'
+        ]
+      },
+      useBuiltIns: 'usage',
+      corejs: 3
+    }
+  ],
+  '@babel/react'
+]
+
+const plugins = [
+  '@babel/syntax-jsx',
+  '@babel/proposal-export-default-from',
+  '@babel/proposal-export-namespace-from',
+  [
+    '@babel/proposal-class-properties',
+    {
+      loose: false
+    }
+  ],
+  [
+    'module-resolver', {
+      alias: {
+        /**
+         *  Storybook
+         */
+        '@modernpoacher/sprockets/sprockets/check-answers/group/answer-item': './src/sprockets/check-answers/group/answer-item.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers/group/answer-title': './src/sprockets/check-answers/group/answer-title.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers/group/answer-value': './src/sprockets/check-answers/group/answer-value.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers/group/change-answer': './src/sprockets/check-answers/group/change-answer.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers/group/visually-hidden-text': './src/sprockets/check-answers/group/visually-hidden-text.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers/group': './src/sprockets/check-answers/group/index.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers/title': './src/sprockets/check-answers/title/index.jsx',
+        '@modernpoacher/sprockets/sprockets/check-answers': './src/sprockets/check-answers/index.jsx',
+        '@modernpoacher/sprockets/sprockets/error-summary/group/error-item': './src/sprockets/error-summary/group/error-item.jsx',
+        '@modernpoacher/sprockets/sprockets/error-summary/group': './src/sprockets/error-summary/group/index.jsx',
+        '@modernpoacher/sprockets/sprockets/error-summary/title': './src/sprockets/error-summary/title/index.jsx',
+        '@modernpoacher/sprockets/sprockets/error-summary': './src/sprockets/error-summary/index.jsx',
+        '@modernpoacher/sprockets/sprockets/fieldset/description': './src/sprockets/fieldset/description/index.jsx',
+        '@modernpoacher/sprockets/sprockets/fieldset/error-message': './src/sprockets/fieldset/error-message/index.jsx',
+        '@modernpoacher/sprockets/sprockets/fieldset/group': './src/sprockets/fieldset/group/index.jsx',
+        '@modernpoacher/sprockets/sprockets/fieldset/title': './src/sprockets/fieldset/title/index.jsx',
+        '@modernpoacher/sprockets/sprockets/fieldset': './src/sprockets/fieldset/index.jsx',
+        '@modernpoacher/sprockets/sprockets/table/group': './src/sprockets/table/group/index.jsx',
+        '@modernpoacher/sprockets/sprockets/table/title': './src/sprockets/table/title/index.jsx',
+        '@modernpoacher/sprockets/sprockets/table': './src/sprockets/table/index.jsx',
+        '@modernpoacher/sprockets/sprockets': './src/sprockets/index.jsx',
+        '@modernpoacher/sprockets/components/common/text-content': './src/components/common/text-content/index.jsx',
+        '@modernpoacher/sprockets/components/description': './src/components/description/index.jsx',
+        '@modernpoacher/sprockets/components/error-message': './src/components/error-message/index.jsx',
+        '@modernpoacher/sprockets/components/title': './src/components/title/index.jsx',
+        '@modernpoacher/sprockets/components/group': './src/components/group/index.jsx',
+        '#stories': './stories'
+      }
+    }
+  ]
+]
+
+module.exports = (api) => {
+  if (api) api.cache.using(env)
+
+  return {
+    presets,
+    plugins,
+    ignore: [
+      /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+    ]
+  }
+}

package/jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@modernpoacher/sprockets/*": [
+        "src/*",
+        "stories/*"
+      ]
+    }
+  }
+}

package/package.json

@@ -0,0 +1,138 @@
+{
+  "name": "@modernpoacher/sprockets",
+  "version": "0.0.5",
+  "description": "Sprockets",
+  "keywords": [
+    "Sprockets",
+    "React"
+  ],
+  "main": "./src/index.cjs",
+  "type": "module",
+  "author": {
+    "name": "Jonathan Perry for Modern Poacher Limited",
+    "email": "modernpoacher@modernpoacher.com",
+    "url": "https://modernpoacher.com"
+  },
+  "license": "ISC",
+  "engines": {
+    "node": ">=18.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com/modernpoacher/sprockets.git"
+  },
+  "scripts": {
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build",
+    "build": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- build",
+    "build:watch": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- build:watch",
+    "transform": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- transform",
+    "transform:watch": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- transform:watch",
+    "pregulp": "npm run nvm",
+    "gulp": "gulp --color",
+    "prelint": "npm run nvm",
+    "lint": "cross-env NODE_ENV=production eslint . .storybook --ext .mjs,.cjs,.jsx,.mts,.cts",
+    "lint:fix": "npm run lint -- --fix",
+    "pretest": "npm run nvm",
+    "test": "cross-env NODE_ENV=test jest --collect-coverage false --run-in-band",
+    "nvm": "bash nvm.sh",
+    "prestorybook": "npm run build && npm run transform",
+    "storybook": "storybook dev -p 6007",
+    "prepare": "husky install",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "debug": "^4.3.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.22.5",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.22.5",
+    "@modernpoacher/design-system": "1.0.71",
+    "@modernpoacher/hooks": "^1.0.432",
+    "@sequencemedia/gulp": "^1.1.63",
+    "@sequencemedia/gulp-clean-css": "^1.0.29",
+    "@sequencemedia/gulp-css-purge": "^1.1.22",
+    "@sequencemedia/gulp-debug": "^1.0.33",
+    "@sequencemedia/gulp-postcss": "^1.0.32",
+    "@sequencemedia/gulp-sass": "^1.0.28",
+    "@sequencemedia/gulp-sourcemaps": "^1.0.29",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
+    "autoprefixer": "^10.4.15",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "core-js": "^3.32.1",
+    "cross-env": "^7.0.3",
+    "cssnano": "^6.0.1",
+    "del": "^7.1.0",
+    "eslint": "^8.48.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard-with-typescript": "35.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.2",
+    "eslint-plugin-react": "^7.33.2",
+    "glob-all": "^3.3.1",
+    "husky": "^8.0.3",
+    "jest": "^29.6.4",
+    "postcss": "^8.4.29",
+    "postcss-easy-import": "^4.0.0",
+    "postcss-map": "^0.11.0",
+    "postcss-normalize": "^10.0.1",
+    "postcss-scss": "^4.0.7",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
+    "react-test-renderer": "^18.2.0",
+    "regenerator-runtime": "^0.14.0",
+    "sass": "^1.66.1",
+    "storybook": "^7.4.0",
+    "vinyl-paths": "^5.0.0"
+  },
+  "imports": {
+    "#build/gulp/build/*": "./build/gulp/build/*.mjs",
+    "#build/gulp/build": "./build/gulp/build/index.mjs",
+    "#build/gulp/*": "./build/gulp/*.mjs",
+    "#build/gulp/transform": "./build/gulp/transform/index.mjs",
+    "#build/paths": "./build/paths.mjs"
+  },
+  "exports": {
+    ".": {
+      "require": "./src/index.cjs",
+      "import": "./src/index.mjs"
+    },
+    "./sprockets/check-answers/group/*": "./src/components/group/check-answers/*.cjs",
+    "./sprockets/check-answers/group": "./src/components/group/check-answers/index.cjs",
+    "./sprockets/check-answers/title": "./src/components/title/check-answers/index.cjs",
+    "./sprockets/check-answers": "./src/sprockets/check-answers/index.cjs",
+    "./sprockets/error-summary/group/*": "./src/components/group/error-summary/*.cjs",
+    "./sprockets/error-summary/group": "./src/components/group/error-summary/index.cjs",
+    "./sprockets/error-summary/title": "./src/components/title/error-summary/index.cjs",
+    "./sprockets/error-summary": "./src/sprockets/error-summary/index.cjs",
+    "./sprockets/fieldset/description": "./src/components/description/fieldset/index.cjs",
+    "./sprockets/fieldset/error-message": "./src/components/error-message/fieldset/index.cjs",
+    "./sprockets/fieldset/group": "./src/components/group/fieldset/index.cjs",
+    "./sprockets/fieldset/title": "./src/components/title/fieldset/index.cjs",
+    "./sprockets/fieldset": "./src/sprockets/fieldset/index.cjs",
+    "./sprockets/table/group": "./src/components/group/table/index.cjs",
+    "./sprockets/table/title": "./src/components/table/table/index.cjs",
+    "./sprockets/table": "./src/sprockets/table/index.cjs",
+    "./sprockets": "./src/sprockets/index.cjs",
+    "./components/common/text-content": "./src/components/common/text-content/index.cjs",
+    "./components/description": "./src/components/description/index.cjs",
+    "./components/error-message": "./src/components/error-message/index.cjs",
+    "./components/group": "./src/components/group/index.cjs",
+    "./components/title": "./src/components/title/index.cjs"
+  }
+}

package/src/components/common/text-content/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/common/text-content')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

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

@@ -0,0 +1,24 @@
+/**
+ * TextContent component
+ *
+ * @typedef {import('@modernpoacher/sprockets/components/common/text-content').TextContentProps} TextContentProps
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * @param {TextContentProps}
+ * @returns {React.JSX.Element}
+ */
+const TextContent = ({ textContent }) => (
+  <span className='text-content'>
+    {textContent}
+  </span>
+)
+
+TextContent.propTypes = {
+  textContent: PropTypes.string.isRequired
+}
+
+export default TextContent

package/src/components/description/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/components/description')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/components/description/index.jsx

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

package/src/components/error-message/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/components/error-message')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

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

@@ -0,0 +1,42 @@
+/**
+ * ErrorMessage component
+ */
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import TextContent from '@modernpoacher/sprockets/components/common/text-content'
+
+export default class ErrorMessage extends Component {
+  getClassName () {
+    return 'error-message'
+  }
+
+  /**
+   *  Compare current and latest `props` for changes to `errorMessage`
+   *
+   *  @param {{errorMessage?: string}} props   Latest props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (props.errorMessage !== this.props.errorMessage)
+  }
+
+  render () {
+    const { errorMessage } = this.props
+
+    if (errorMessage) {
+      return (
+        <span className={this.getClassName()}>
+          <TextContent textContent={errorMessage} />
+        </span>
+      )
+    }
+
+    return null
+  }
+}
+
+ErrorMessage.propTypes = {
+  errorMessage: PropTypes.string
+}

package/src/components/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/components/group')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/components/group/index.jsx

@@ -0,0 +1,55 @@
+/**
+ * Group component
+ *
+ * @typedef {import('@modernpoacher/sprockets/components/group').GroupProps} GroupProps
+ */
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class Group extends Component {
+  getClassName () {
+    return 'group'
+  }
+
+  /**
+   * @param {GroupProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.onChange !== this.props.onChange) ||
+      (props.children !== this.props.children)
+    )
+  }
+
+  render () {
+    const {
+      onChange,
+      groupRef,
+      children
+    } = this.props
+
+    return (
+      <fieldset
+        onChange={onChange}
+        className={this.getClassName()}
+        ref={groupRef}>
+        {children}
+      </fieldset>
+    )
+  }
+}
+
+Group.propTypes = {
+  onChange: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}

package/src/components/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/components/title')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/components/title/index.jsx

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

package/src/index.cjs

@@ -0,0 +1,19 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets')
+
+log('`sprockets` is awake')
+
+const CheckAnswersSprocket = require('./sprockets/check-answers/index.cjs')
+const ErrorSummarySprocket = require('./sprockets/error-summary/index.cjs')
+const FieldsetSprocket = require('./sprockets/fieldset/index.cjs')
+
+module.exports.CheckAnswersSprocket = CheckAnswersSprocket
+module.exports.ErrorSummarySprocket = ErrorSummarySprocket
+module.exports.FieldsetSprocket = FieldsetSprocket