shinkansen-sprockets 1.2.21 → 1.3.1

package/babel.config.cjs

@@ -40,7 +40,8 @@ const presets = [
 ]
 
 const plugins = [
-  '@babel/syntax-jsx'
+  '@babel/syntax-jsx',
+  '@babel/syntax-import-attributes'
 ]
 
 // @ts-ignore

package/eslint.config.mjs

@@ -79,7 +79,8 @@ export default [
     ],
     ignores: [
       'src',
-      'stories'
+      'stories',
+      'test'
     ],
     languageOptions: {
       globals: {
@@ -98,6 +99,16 @@ export default [
       }
     }
   }),
+  standard({
+    files: [
+      'test/**/*.{mjs,cjs,mts,cts}'
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.mocha
+      }
+    }
+  }),
   /**
    *  Standard config for all `jsx` files
    */
@@ -166,7 +177,8 @@ export default [
       '**/*.{mts,cts}'
     ],
     ignores: [
-      'src'
+      'src',
+      'test'
     ],
     languageOptions: {
       parser: typescriptParser,
@@ -182,7 +194,8 @@ export default [
   }),
   typescript({
     files: [
-      'src/**/*.{mts,cts}'
+      'src/**/*.{mts,cts}',
+      'test/**/*.{mts,cts}'
     ],
     languageOptions: {
       parser: typescriptParser,

package/index.d.mts

@@ -35,6 +35,46 @@ declare global {
       href: string
     }
 
+    export namespace Super {
+      export namespace Sprockets {
+        export interface SprocketProps extends React.PropsWithChildren {
+          title?: string
+          groupRe?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
+        }
+      }
+      export namespace Components {
+        export namespace Description {
+          export interface DescriptionProps {
+            description?: string
+          }
+        }
+
+        export namespace ErrorMessage {
+          export interface ErrorMessageProps {
+            errorMessage?: ErrorDefinitionType[]
+          }
+
+          export interface ErrorMessageState {
+            errorMessage?: ErrorDefinitionType[]
+          }
+        }
+
+        export namespace Group {
+          export interface GroupProps extends React.PropsWithChildren {
+            groupRef?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
+          }
+
+          export type GroupState = Record<PropertyKey, unknown>
+        }
+
+        export namespace Title {
+          export interface TitleProps {
+            title?: string
+          }
+        }
+      }
+    }
+
     export namespace Components {
       export namespace Common {
         export namespace TextContent {
@@ -51,97 +91,82 @@ declare global {
       }
 
       export namespace Description {
-        export interface DescriptionProps {
-          description?: string
-        }
+        export type DescriptionProps = Super.Components.Description.DescriptionProps
       }
 
       export namespace ErrorMessage {
-        export interface ErrorMessageProps {
-          errorMessage?: ErrorDefinitionType[]
-        }
+        export type ErrorMessageProps = Super.Components.ErrorMessage.ErrorMessageProps
 
-        export interface ErrorMessageState {
-          errorMessage?: ErrorDefinitionType[]
-        }
+        export type ErrorMessageState = Super.Components.ErrorMessage.ErrorMessageState
       }
 
       export namespace Group {
-        export interface GroupProps extends React.PropsWithChildren {
-          groupRef?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
-        }
+        export type GroupProps = Super.Components.Group.GroupProps
 
-        export type GroupState = Record<PropertyKey, unknown>
+        export type GroupState = Super.Components.Group.GroupState
+      }
 
-        export namespace CheckAnswers {
-          export interface CheckAnswersProps extends GroupProps {
-            checkAnswers?: AnswerDefinitionType[]
-          }
+      export namespace Title {
+        export type TitleProps = Super.Components.Title.TitleProps
+      }
+    }
 
-          export interface CheckAnswersState extends GroupState {
-            checkAnswers?: AnswerDefinitionType[]
-          }
+    export namespace Sprockets {
+      export type SprocketProps = Super.Sprockets.SprocketProps
+
+      export namespace CheckAnswers {
+        export interface CheckAnswersProps extends Super.Sprockets.SprocketProps {
+          checkAnswers?: AnswerDefinitionType[]
         }
 
-        export namespace ErrorSummary {
-          export interface ErrorSummaryProps extends GroupProps {
-            errorSummary?: ErrorDefinitionType[]
+        export namespace Group {
+          export interface CheckAnswersProps extends Super.Components.Group.GroupProps {
+            checkAnswers?: AnswerDefinitionType[]
           }
 
-          export interface ErrorSummaryState extends GroupState {
-            errorSummary?: ErrorDefinitionType[]
+          export interface CheckAnswersState extends Super.Components.Group.GroupState {
+            checkAnswers?: AnswerDefinitionType[]
           }
         }
 
-        export namespace Fieldset {
-          export type FieldsetProps = GroupProps
-          export type FieldsetState = GroupState
+        export namespace Title {
+          export type CheckAnswersProps = Super.Components.Title.TitleProps
         }
       }
 
-      export namespace Title {
-        export interface TitleProps {
-          title?: string
+      export namespace ErrorSummary {
+        export interface ErrorSummaryProps extends Super.Sprockets.SprocketProps {
+          errorSummary?: ErrorDefinitionType[]
         }
 
-        export namespace CheckAnswers {
-          export type CheckAnswersProps = TitleProps
-        }
+        export namespace Group {
+          export interface ErrorSummaryProps extends Super.Components.Group.GroupProps {
+            errorSummary?: ErrorDefinitionType[]
+          }
 
-        export namespace ErrorSummary {
-          export type ErrorSummaryProps = TitleProps
+          export interface ErrorSummaryState extends Super.Components.Group.GroupState {
+            errorSummary?: ErrorDefinitionType[]
+          }
         }
 
-        export namespace Fieldset {
-          export type FieldsetProps = TitleProps
+        export namespace Title {
+          export type ErrorSummaryProps = Super.Components.Title.TitleProps
         }
       }
-    }
 
-    export namespace Sprockets {
-      export namespace Sprocket {
-        export interface SprocketProps extends React.PropsWithChildren {
-          title?: string
-          groupRe?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
-        }
-
-        export namespace CheckAnswers {
-          export interface CheckAnswersProps extends SprocketProps {
-            checkAnswers?: AnswerDefinitionType[]
-          }
+      export namespace Fieldset {
+        export interface FieldsetProps extends Super.Sprockets.SprocketProps {
+          description?: string
+          errorMessage?: ErrorDefinitionType[]
         }
 
-        export namespace ErrorSummary {
-          export interface ErrorSummaryProps extends SprocketProps {
-            errorSummary?: ErrorDefinitionType[]
-          }
+        export namespace Group {
+          export type FieldsetProps = Super.Components.Group.GroupProps
+          export type FieldsetState = Super.Components.Group.GroupState
         }
 
-        export namespace Fieldset {
-          export interface FieldsetProps extends SprocketProps {
-            description?: string
-            errorMessage?: ErrorDefinitionType[]
-          }
+        export namespace Title {
+          export type FieldsetProps = Super.Components.Title.TitleProps
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shinkansen-sprockets",
-  "version": "1.2.21",
+  "version": "1.3.1",
   "description": "Shinkansen Sprockets",
   "keywords": [
     "Shinkansen",
@@ -39,7 +39,9 @@
     "prestorybook": "npm run build && npm run transform",
     "pretest": "npm run nvm",
     "storybook": "storybook dev -p 6007",
-    "test": "cross-env NODE_ENV=test jest",
+    "test": "npm run test:mocha && npm run test:jest",
+    "test:jest": "cross-env NODE_ENV=test jest",
+    "test:mocha": "cross-env NODE_ENV=test mocha test --recursive",
     "transform": "cross-env DEBUG=shinkansen-sprockets* ./transform.sh"
   },
   "dependencies": {
@@ -50,25 +52,32 @@
   "devDependencies": {
     "@babel/core": "^7.26.9",
     "@babel/eslint-parser": "^7.26.8",
+    "@babel/plugin-syntax-import-attributes": "^7.26.0",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
     "@modernpoacher/design-system": "1.1.31",
     "@sequencemedia/eslint-config-standard": "^0.2.41",
     "@sequencemedia/eslint-config-typescript": "^0.1.57",
-    "@storybook/addon-actions": "7.6.20",
-    "@storybook/addon-essentials": "7.6.20",
-    "@storybook/addon-links": "7.6.20",
-    "@storybook/react": "7.6.20",
-    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-webpack5": "^8.6.4",
+    "@storybook/theming": "^8.6.4",
     "@types/babel__register": "^7.17.3",
+    "@types/chai": "^5.0.1",
     "@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",
     "@typescript-eslint/eslint-plugin": "^8.26.0",
     "@typescript-eslint/parser": "^8.26.0",
     "autoprefixer": "^10.4.20",
+    "chai": "^5.2.0",
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.41.0",
     "cross-env": "^7.0.3",
@@ -79,6 +88,7 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.2",
+    "mocha": "^11.1.0",
     "perfectionist": "^2.4.0",
     "postcss": "^8.5.3",
     "postcss-discard-comments": "^7.0.3",
@@ -94,7 +104,7 @@
     "remove-files-webpack-plugin": "^1.5.0",
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
-    "storybook": "7.6.20",
+    "storybook": "^8.6.4",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   },
@@ -104,7 +114,6 @@
       "require": "./src/index.cjs",
       "import": "./src/index.mjs"
     },
-    "#sprockets/common": "./src/common/index.mjs",
     "#sprockets/components": {
       "require": "./src/components/index.cjs",
       "import": "./src/components/index.mjs"
@@ -114,6 +123,12 @@
     "#sprockets/sprockets/*": "./src/sprockets/*/index.cjs",
     "#sprockets/sprockets/check-answers/group/*": "./src/sprockets/check-answers/group/*.cjs",
     "#sprockets/sprockets/error-summary/group/*": "./src/sprockets/error-summary/group/*.cjs",
+    "#sprockets/super/components": {
+      "require": "./src/super/components/index.cjs",
+      "import": "./src/super/components/index.mjs"
+    },
+    "#sprockets/super/components/*": "./src/super/components/*/index.cjs",
+    "#sprockets/super/sprockets": "./src/super/sprockets/index.cjs",
     "#sprockets/transformers": "./src/transformers/index.mjs",
     "#sprockets/transformers/*": "./src/transformers/*/index.mjs",
     "#stories/definitions/*": "./stories/definitions/*.json",
@@ -125,12 +140,22 @@
       "require": "./src/index.cjs",
       "import": "./src/index.mjs"
     },
-    "./common": "./src/common/index.mjs",
+    "./components": {
+      "require": "./src/components/index.cjs",
+      "import": "./src/components/index.mjs"
+    },
     "./components/*": "./src/components/*/index.cjs",
     "./sprockets": "./src/sprockets/index.cjs",
     "./sprockets/*": "./src/sprockets/*/index.cjs",
     "./sprockets/check-answers/group/*": "./src/sprockets/check-answers/group/*.cjs",
     "./sprockets/error-summary/group/*": "./src/sprockets/error-summary/group/*.cjs",
+    "./super/components": {
+      "require": "./src/super/components/index.cjs",
+      "import": "./src/super/components/index.mjs"
+    },
+    "./super/components/*": "./src/super/components/*/index.cjs",
+    "./super/sprockets": "./src/super/sprockets/index.cjs",
+    "./transformers": "./src/transformers/index.mjs",
     "./transformers/*": "./src/transformers/*/index.mjs"
   }
 }

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

@@ -11,7 +11,10 @@ const log = debug('shinkansen-sprockets/components/common/text-content')
 log('`shinkansen` is awake')
 
 const {
-  default: component // @ts-ignore
+  default: TextContent // @ts-expect-error
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = TextContent

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

@@ -3,7 +3,7 @@
  */
 
 /**
- * TextContent component
+ *  TextContent component
  */
 import React from 'react'
 import PropTypes from 'prop-types'

package/src/components/common/visually-hidden-text/index.cjs

@@ -11,7 +11,10 @@ const log = debug('shinkansen-sprockets/components/common/visually-hidden-text')
 log('`shinkansen` is awake')
 
 const {
-  default: component // @ts-ignore
+  default: VisuallyHiddenText // @ts-expect-error
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = VisuallyHiddenText

package/src/components/common/visually-hidden-text/index.jsx

@@ -3,7 +3,7 @@
  */
 
 /**
- * VisuallyHiddenText component
+ *  VisuallyHiddenText component
  */
 import React from 'react'
 import PropTypes from 'prop-types'

package/src/components/description/index.cjs

@@ -11,7 +11,10 @@ const log = debug('shinkansen-sprockets/components/description')
 log('`shinkansen` is awake')
 
 const {
-  default: component // @ts-ignore
+  default: Description // @ts-expect-error
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Description

package/src/components/description/index.d.mts

@@ -1,15 +1,6 @@
 declare module '#sprockets/components/description' {
-  import React from 'react'
-
-  export type DescriptionProps = SprocketsTypes.Components.Description.DescriptionProps
-
-  export default class Description extends React.Component<DescriptionProps> {
-    static propTypes: object
-
-    getClassName (): string
-
-    shouldComponentUpdate (props: DescriptionProps): boolean
-  }
+  export { default } from '#sprockets/super/components/description'
+  export * from '#sprockets/super/components/description'
 }
 
 declare module 'shinkansen-sprockets/components/description' {

package/src/components/description/index.jsx

@@ -1,47 +1,5 @@
 /**
- *  @typedef {SprocketsTypes.Components.Description.DescriptionProps} DescriptionProps
+ *  Description component
  */
 
-/**
- * Description component
- */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import TextContent from '#sprockets/components/common/text-content'
-
-export default class Description extends Component {
-  getClassName () {
-    return 'description'
-  }
-
-  /**
-   *  @param {DescriptionProps} props
-   *  @returns {boolean}
-   */
-  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
-}
+export { default } from '#sprockets/super/components/description'

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

@@ -11,7 +11,10 @@ const log = debug('shinkansen-sprockets/components/error-message')
 log('`shinkansen` is awake')
 
 const {
-  default: component // @ts-ignore
+  default: ErrorMessage // @ts-expect-error
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = ErrorMessage

package/src/components/error-message/index.d.mts

@@ -1,24 +1,6 @@
 declare module '#sprockets/components/error-message' {
-  import React from 'react'
-
-  export type ErrorMessageProps = SprocketsTypes.Components.ErrorMessage.ErrorMessageProps
-  export type ErrorMessageState = SprocketsTypes.Components.ErrorMessage.ErrorMessageState
-
-  export default class ErrorMessage extends React.Component<ErrorMessageProps, ErrorMessageState> {
-    static propTypes: object
-
-    hasTextContent (): boolean
-
-    getTextContent (): string
-
-    getClassName (): string
-
-    static getDerivedStateFromProps (props: ErrorMessageProps, state: ErrorMessageState): ErrorMessageState
-
-    shouldComponentUpdate (props: ErrorMessageProps, state: ErrorMessageState): boolean
-
-    renderTextContent (): React.JSX.Element | null
-  }
+  export { default } from '#sprockets/super/components/error-message'
+  export * from '#sprockets/super/components/error-message'
 }
 
 declare module 'shinkansen-sprockets/components/error-message' {

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

@@ -1,121 +1,5 @@
 /**
- *  @typedef {SprocketsTypes.ErrorDefinitionType} ErrorDefinitionType
- *  @typedef {SprocketsTypes.Components.ErrorMessage.ErrorMessageProps} ErrorMessageProps
- *  @typedef {SprocketsTypes.Components.ErrorMessage.ErrorMessageState} ErrorMessageState
+ *  ErrorMessage component
  */
 
-/**
- * ErrorMessage component
- */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import equal from 'fast-deep-equal'
-
-import transform from '#sprockets/transformers/error-message'
-
-import TextContent from '#sprockets/components/common/text-content'
-
-export default class ErrorMessage extends Component {
-  /**
-   *  @type {ErrorMessageState}
-   */
-  state = {}
-
-  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'
-  }
-
-  /**
-   *  Merge latest `props` to `state`
-   *
-   *  @param {ErrorMessageProps} props   Latest props
-   *  @param {ErrorMessageState} state   Current state
-   *  @returns {ErrorMessageState}
-   */
-  static getDerivedStateFromProps ({ errorMessage }, { errorMessage: E }) {
-    return {
-      errorMessage: equal(errorMessage, E) ? E : errorMessage
-    }
-  }
-
-  /**
-   *  Compare current and latest `state` for changes to `errorMessage`
-   *
-   *  @param {ErrorMessageProps} props   Latest props
-   *  @param {ErrorMessageState} state   Latest state
-   *  @returns {boolean}
-   */
-  shouldComponentUpdate (props, state) {
-    const {
-      errorMessage: e
-    } = state
-
-    const {
-      errorMessage: E
-    } = this.state
-
-    return !equal(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
-  })
-}
+export { default } from '#sprockets/super/components/error-message'

package/src/components/group/index.cjs

@@ -11,7 +11,10 @@ const log = debug('shinkansen-sprockets/components/group')
 log('`shinkansen` is awake')
 
 const {
-  default: component // @ts-ignore
+  default: Group // @ts-expect-error
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Group