shinkansen-sprockets 2.0.6 → 2.1.0

package/babel.config.cjs

@@ -52,7 +52,7 @@ module.exports = (api) => {
     presets,
     plugins,
     ignore: [
-      /node_modules\/(?!shinkansen|@modernpoacher)/
+      /node_modules\/(?!shinkansen|@modernpoacher|react-component-instance|react-component-snapshot)/
     ]
   }
 }

package/eslint.config.mjs

@@ -80,7 +80,8 @@ export default [
     ignores: [
       'src',
       'stories',
-      'test'
+      'test',
+      'jest.*.mjs'
     ],
     languageOptions: {
       globals: {
@@ -145,7 +146,8 @@ export default [
   standard({
     files: [
       'src/**/__tests__/**/*.jsx',
-      'stories/**/__tests__/**/*.jsx'
+      'stories/**/__tests__/**/*.jsx',
+      'jest.*.mjs'
     ],
     languageOptions: {
       parser: babelParser,

package/index.d.mts

@@ -51,11 +51,11 @@ declare global {
 
         export namespace ErrorMessage {
           export interface ErrorMessageProps {
-            errorMessage?: ErrorDefinitionType[]
+            errorMessage?: ErrorDefinitionType
           }
 
           export interface ErrorMessageState {
-            errorMessage?: ErrorDefinitionType[]
+            errorMessage?: ErrorDefinitionType
           }
         }
 
@@ -157,7 +157,7 @@ declare global {
       export namespace Fieldset {
         export interface FieldsetProps extends Super.Sprockets.SprocketProps {
           description?: string
-          errorMessage?: ErrorDefinitionType[]
+          errorMessage?: ErrorDefinitionType
         }
 
         export namespace Group {

package/jest.after-each.mjs

@@ -0,0 +1,10 @@
+afterEach(() => {
+  const {
+    body
+  } = document
+
+  Array.from(body.children)
+    .forEach((child) => {
+      body.removeChild(child)
+    })
+})

package/jest.before-each.mjs

@@ -0,0 +1 @@
+beforeEach(() => {})

package/jest.config.mjs

@@ -0,0 +1,26 @@
+export default {
+  bail: true,
+  verbose: true,
+  rootDir: '.',
+  roots: [
+    './src'
+  ],
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: './coverage',
+  coverageProvider: 'v8',
+  testRegex: '(/__tests__/.*|(\\.|/))(test|spec)\\.(mjs?|jsx?)$',
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.mjs$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules\\/(?!react-component-instance)\\/'
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'mjs'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [
+    '<rootDir>/jest.before-each.mjs',
+    '<rootDir>/jest.after-each.mjs'
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shinkansen-sprockets",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "Shinkansen Sprockets",
   "keywords": [
     "Shinkansen",
@@ -64,21 +64,24 @@
     "@modernpoacher/design-system": "2.0.2",
     "@sequencemedia/eslint-config-standard": "^0.2.43",
     "@sequencemedia/eslint-config-typescript": "^0.1.62",
-    "@storybook/addon-actions": "^8.6.6",
-    "@storybook/addon-essentials": "^8.6.6",
-    "@storybook/addon-links": "^8.6.6",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/manager-api": "^8.6.6",
-    "@storybook/react": "^8.6.6",
-    "@storybook/react-webpack5": "^8.6.6",
-    "@storybook/theming": "^8.6.6",
+    "@storybook/manager-api": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-webpack5": "^8.6.7",
+    "@storybook/theming": "^8.6.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/babel__register": "^7.17.3",
     "@types/chai": "^5.2.0",
     "@types/debug": "^4.1.12",
     "@types/jest": "^29.5.14",
     "@types/mocha": "^10.0.10",
-    "@types/react": "18.3.13",
-    "@types/react-test-renderer": "^19.0.0",
+    "@types/prop-types": "^15.7.14",
+    "@types/react": "^19.0.11",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "autoprefixer": "^10.4.21",
@@ -87,10 +90,11 @@
     "cross-env": "^7.0.3",
     "eslint": "^9.22.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^0.11.4",
+    "eslint-plugin-storybook": "^0.11.6",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.2",
     "mocha": "^11.1.0",
     "perfectionist": "^2.4.0",
@@ -102,14 +106,15 @@
     "postcss-map": "^0.11.0",
     "prettier": "^3.5.3",
     "prop-types": "^15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19.0.0",
+    "react-component-instance": "^0.0.6",
+    "react-component-snapshot": "^0.0.1",
+    "react-dom": "^19.0.0",
     "react-router": "^7.3.0",
-    "react-test-renderer": "18.3.1",
     "remove-files-webpack-plugin": "^1.5.0",
-    "sass": "^1.85.1",
+    "sass": "^1.86.0",
     "sass-loader": "^16.0.5",
-    "storybook": "^8.6.6",
+    "storybook": "^8.6.7",
     "stylelint": "^16.16.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.11.1",

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

@@ -11,8 +11,8 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import equal from 'fast-deep-equal'
 import classnames from 'classnames'
+import equal from 'fast-deep-equal'
 
 import debug from 'debug'
 
@@ -78,14 +78,14 @@ export default class CheckAnswersGroup extends Group {
    *  @param {CheckAnswersState} state   Current state
    *  @returns {CheckAnswersState}
    */
-  static getDerivedStateFromProps ({ checkAnswers }, { checkAnswers: C }) {
+  static getDerivedStateFromProps ({ checkAnswers: c }, { checkAnswers: C }) {
     return {
-      checkAnswers: equal(checkAnswers, C) ? C : checkAnswers
+      checkAnswers: (c === C || equal(c, C)) ? C : c
     }
   }
 
   /**
-   * Compare latest 'props' with 'state' for changes to 'checkAnswers'
+   *  Compare latest 'props' with 'state' for changes to 'checkAnswers'
    *
    *  @param {CheckAnswersProps} props   Latest props
    *  @param {CheckAnswersState} state   Current state
@@ -94,13 +94,13 @@ export default class CheckAnswersGroup extends Group {
   shouldComponentUpdate (props, state) {
     const {
       checkAnswers: c = DEFAULT_CHECK_ANSWERS
-    } = state
+    } = this.state
 
     const {
       checkAnswers: C = DEFAULT_CHECK_ANSWERS
-    } = this.state
+    } = state
 
-    return (c !== C)
+    return !(c === C || equal(c, C))
   }
 
   render () {

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

@@ -9,7 +9,6 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import classnames from 'classnames'
 
 import Sprocket from '#sprockets/sprockets'

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

@@ -20,10 +20,14 @@ export default class CheckAnswersTitle extends Title {
   }
 
   render () {
-    if (this.hasTextContent()) {
+    const {
+      title
+    } = this.props
+
+    if (title) {
       return (
         <h2 className={this.getClassName()}>
-          {this.renderTextContent()}
+          {this.renderTextContent(title)}
         </h2>
       )
     }

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

@@ -11,9 +11,8 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import equal from 'fast-deep-equal'
 import classnames from 'classnames'
+import equal from 'fast-deep-equal'
 
 import debug from 'debug'
 
@@ -75,9 +74,9 @@ export default class ErrorSummaryGroup extends Group {
    *  @param {ErrorSummaryState} state   Current state
    *  @returns {ErrorSummaryState}
    */
-  static getDerivedStateFromProps ({ errorSummary }, { errorSummary: E }) {
+  static getDerivedStateFromProps ({ errorSummary: e }, { errorSummary: E }) {
     return {
-      errorSummary: equal(errorSummary, E) ? E : errorSummary
+      errorSummary: (e === E || equal(e, E)) ? E : e
     }
   }
 
@@ -91,13 +90,13 @@ export default class ErrorSummaryGroup extends Group {
   shouldComponentUpdate (props, state) {
     const {
       errorSummary: e = DEFAULT_ERROR_SUMMARY
-    } = state
+    } = this.state
 
     const {
       errorSummary: E = DEFAULT_ERROR_SUMMARY
-    } = this.state
+    } = state
 
-    return !equal(e, E)
+    return !(e === E || equal(e, E))
   }
 
   render () {

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

@@ -9,7 +9,6 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import classnames from 'classnames'
 
 import Sprocket from '#sprockets/sprockets'

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

@@ -20,10 +20,14 @@ export default class ErrorSummaryTitle extends Title {
   }
 
   render () {
-    if (this.hasTextContent()) {
+    const {
+      title
+    } = this.props
+
+    if (title) {
       return (
         <h2 className={this.getClassName()}>
-          {this.renderTextContent()}
+          {this.renderTextContent(title)}
         </h2>
       )
     }

package/src/js/sprockets/fieldset/index.jsx

@@ -8,7 +8,6 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import classnames from 'classnames'
 
 import Sprocket from '#sprockets/sprockets'

package/src/js/super/components/description/index.jsx

@@ -10,6 +10,9 @@ import PropTypes from 'prop-types'
 
 import TextContent from '#sprockets/components/common/text-content'
 
+/**
+ *  @extends {Component<DescriptionProps>}
+ */
 export default class Description extends Component {
   getClassName () {
     return 'description'

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

@@ -15,6 +15,9 @@ import transform from '#sprockets/transformers/error-message'
 
 import TextContent from '#sprockets/components/common/text-content'
 
+/**
+ *  @extends {Component<ErrorMessageProps, ErrorMessageState>}
+ */
 export default class ErrorMessage extends Component {
   /**
    *  @type {ErrorMessageState}
@@ -26,11 +29,15 @@ export default class ErrorMessage extends Component {
       errorMessage
     } = this.props
 
-    const {
-      text
-    } = transform(errorMessage)
+    if (errorMessage) {
+      const {
+        text
+      } = transform(errorMessage)
 
-    return !!text
+      return !!text
+    }
+
+    return false
   }
 
   getTextContent () {
@@ -38,11 +45,15 @@ export default class ErrorMessage extends Component {
       errorMessage
     } = this.props
 
-    const {
-      text
-    } = transform(errorMessage)
+    if (errorMessage) {
+      const {
+        text
+      } = transform(errorMessage)
+
+      return text
+    }
 
-    return text
+    return ''
   }
 
   getClassName () {
@@ -56,9 +67,9 @@ export default class ErrorMessage extends Component {
    *  @param {ErrorMessageState} state   Current state
    *  @returns {ErrorMessageState}
    */
-  static getDerivedStateFromProps ({ errorMessage }, { errorMessage: E }) {
+  static getDerivedStateFromProps ({ errorMessage: e }, { errorMessage: E }) {
     return {
-      errorMessage: equal(errorMessage, E) ? E : errorMessage
+      errorMessage: (e === E || equal(e, E)) ? E : e
     }
   }
 
@@ -72,13 +83,13 @@ export default class ErrorMessage extends Component {
   shouldComponentUpdate (props, state) {
     const {
       errorMessage: e
-    } = state
+    } = this.state
 
     const {
       errorMessage: E
-    } = this.state
+    } = state
 
-    return !equal(E, e)
+    return !(e === E || equal(e, E))
   }
 
   renderTextContent () {

package/src/js/super/components/group/index.jsx

@@ -25,17 +25,24 @@ export default class Group extends Component {
 
   render () {
     const {
-      groupRef,
       children
     } = this.props
 
-    return (
-      <fieldset
-        className={this.getClassName()}
-        ref={groupRef}>
-        {children}
-      </fieldset>
-    )
+    if (children) {
+      const {
+        groupRef
+      } = this.props
+
+      return (
+        <fieldset
+          className={this.getClassName()}
+          ref={groupRef}>
+          {children}
+        </fieldset>
+      )
+    }
+
+    return null
   }
 }
 
@@ -47,6 +54,6 @@ Group.propTypes = {
     )
   ]),
   groupRef: PropTypes.shape({
-    current: PropTypes.shape({}).isRequired
+    current: PropTypes.shape({})
   })
 }

package/src/js/super/components/title/index.d.mts

@@ -6,15 +6,11 @@ declare module '#sprockets/super/components/title' {
   export default class Title<P extends TitleProps> extends React.Component<P> {
     static propTypes: object
 
-    hasTextContent (): boolean
-
-    getTextContent (): string
-
     getClassName (): string
 
     shouldComponentUpdate (props: TitleProps): boolean
 
-    renderTextContent (): React.JSX.Element | null
+    renderTextContent (textContent: string): React.JSX.Element
   }
 }
 

package/src/js/super/components/title/index.jsx

@@ -10,23 +10,10 @@ import PropTypes from 'prop-types'
 
 import TextContent from '#sprockets/components/common/text-content'
 
+/**
+ *  @extends {Component<TitleProps>}
+ */
 export default class Title extends Component {
-  hasTextContent () {
-    const {
-      title
-    } = this.props
-
-    return !!title
-  }
-
-  getTextContent () {
-    const {
-      title
-    } = this.props
-
-    return title
-  }
-
   getClassName () {
     return 'title'
   }
@@ -41,25 +28,27 @@ export default class Title extends Component {
     )
   }
 
-  renderTextContent () {
-    if (this.hasTextContent()) {
-      const textContent = this.getTextContent()
-
-      return (
-        <TextContent
-          textContent={textContent}
-        />
-      )
-    }
-
-    return null
+  /**
+   * @param {string} textContent
+   * @returns {React.JSX.Element}
+   */
+  renderTextContent (textContent) {
+    return (
+      <TextContent
+        textContent={textContent}
+      />
+    )
   }
 
   render () {
-    if (this.hasTextContent()) {
+    const {
+      title
+    } = this.props
+
+    if (title) {
       return (
         <legend className={this.getClassName()}>
-          {this.renderTextContent()}
+          {this.renderTextContent(title)}
         </legend>
       )
     }

package/src/js/super/sprockets/index.jsx

@@ -74,6 +74,6 @@ Sprocket.propTypes = {
     )
   ]),
   groupRef: PropTypes.shape({
-    current: PropTypes.shape({}).isRequired
+    current: PropTypes.shape({})
   })
 }