@modernpoacher/sprockets 0.0.287 → 1.0.0

package/.prettierignore

@@ -0,0 +1,4 @@
+*.html
+*.mjs
+*.cjs
+.stylelintrc

package/babel.config.cjs

@@ -40,7 +40,8 @@ const presets = [
 ]
 
 const plugins = [
-  '@babel/syntax-jsx'
+  '@babel/syntax-jsx',
+  '@babel/syntax-import-attributes'
 ]
 
 // @ts-ignore
@@ -51,7 +52,10 @@ module.exports = (api) => {
     presets,
     plugins,
     ignore: [
-      /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
+      /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)\//,
+      /node_modules\/(?!react-component-instance)\//,
+      /node_modules\/(?!react-component-snapshot)\//,
+      /node_modules\/(?!react-component-name)\//
     ]
   }
 }

package/eslint.config.mjs

@@ -58,12 +58,11 @@ export default [
     ]
   },
   /**
-   *  React config for all `jsx` and `tsx` files
+   *  React config for all `jsx` files
    */
   {
     ...reactPlugin.configs.flat.recommended,
     settings: {
-      ...reactPlugin.configs.flat.recommended.settings,
       ...reactSettings
     }
   },
@@ -80,7 +79,9 @@ export default [
     ],
     ignores: [
       'src',
-      'stories'
+      'stories',
+      'test',
+      'jest.*.mjs'
     ],
     languageOptions: {
       globals: {
@@ -99,16 +100,26 @@ export default [
       }
     }
   }),
+  standard({
+    files: [
+      'test/**/*.{mjs,cjs,mts,cts}'
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.mocha
+      }
+    }
+  }),
   /**
-   *  Standard config for all `jsx` and `tsx` files
+   *  Standard config for all `jsx` files
    */
   standard({
     files: [
-      'src/**/*.tsx',
+      'src/**/*.jsx',
       'stories/**/*.jsx'
     ],
     ignores: [
-      'src/**/__tests__/**/*.tsx',
+      'src/**/__tests__/**/*.jsx',
       'stories/**/__tests__/**/*.jsx'
     ],
     languageOptions: {
@@ -120,25 +131,23 @@ export default [
       globals: {
         ...globals.browser
       }
-    },
+    }, // @ts-expect-error Storybook
     plugins: {
       ...reactPlugins,
       ...storybookPlugins
-    },
+    }, // @ts-expect-error Storybook
     rules: {
       ...reactRules
     },
     settings: {
-      ...reactSettings,
-      'import/resolver': {
-        'babel-module': {}
-      }
+      ...reactSettings
     }
   }),
   standard({
     files: [
-      'src/**/__tests__/**/*.tsx',
-      'stories/**/__tests__/**/*.jsx'
+      'src/**/__tests__/**/*.jsx',
+      'stories/**/__tests__/**/*.jsx',
+      'jest.*.mjs'
     ],
     languageOptions: {
       parser: babelParser,
@@ -150,19 +159,16 @@ export default [
         ...globals.browser,
         ...globals.jest
       }
-    },
+    }, // @ts-expect-error Storybook
     plugins: {
       ...reactPlugins,
       ...storybookPlugins
-    },
+    }, // @ts-expect-error Storybook
     rules: {
       ...reactRules
     },
     settings: {
-      ...reactSettings,
-      'import/resolver': {
-        'babel-module': {}
-      }
+      ...reactSettings
     }
   }),
   /**
@@ -173,80 +179,36 @@ export default [
       '**/*.{mts,cts}'
     ],
     ignores: [
-      'src'
-    ],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        SprocketsTypes: 'readonly'
-      }
-    }
-  }),
-  typescript({
-    files: [
-      'src/**/*.{mts,cts}'
-    ],
-    languageOptions: {
-      globals: {
-        ...globals.browser
-      }
-    }
-  }),
-  /**
-   *  TypeScript config for only `tsx` files
-   */
-  typescript({
-    files: [
-      'src/**/*.tsx'
-    ],
-    ignores: [
-      'src/**/__tests__/**/*.tsx'
+      'src',
+      'test'
     ],
     languageOptions: {
       parser: typescriptParser,
       parserOptions: {
-        ...reactParserOptions,
         projectService: true,
         project: 'tsconfig.json'
       },
       globals: {
-        ...globals.browser
+        ...globals.node,
+        SprocketsTypes: 'readonly'
       }
-    },
-    plugins: {
-      ...reactPlugins
-    },
-    rules: {
-      ...reactRules
-    },
-    settings: {
-      ...reactSettings
     }
   }),
   typescript({
     files: [
-      'src/**/__tests__/**/*.tsx'
+      'src/**/*.{mts,cts}',
+      'test/**/*.{mts,cts}'
     ],
     languageOptions: {
       parser: typescriptParser,
       parserOptions: {
-        ...reactParserOptions,
         projectService: true,
         project: 'tsconfig.json'
       },
       globals: {
         ...globals.browser,
-        ...globals.jest
+        SprocketsTypes: 'readonly'
       }
-    },
-    plugins: {
-      ...reactPlugins
-    },
-    rules: {
-      ...reactRules
-    },
-    settings: {
-      ...reactSettings
     }
   })
 ]

package/index.d.mts

@@ -1,23 +1,173 @@
+import type React from 'react'
+
 declare global {
   namespace SprocketsTypes {
-    export type onEventType = () => void
+    interface AnswerChangeAnswerType {
+      href: string
+      text: string
+      visuallyHiddenText?: string
+    }
 
     export interface AnswerDefinitionType {
       answer: {
         title: string
         value: string | string[]
       }
-      changeAnswer: {
-        text: string
-        href: string
-        visuallyHiddenText?: string
-      }
+      changeAnswer: AnswerChangeAnswerType
     }
 
     export interface ErrorDefinitionType {
       text: string
       href: string
     }
+
+    export interface FieldChangeType {
+      text: string
+      href: string
+    }
+
+    export interface FieldErrorType {
+      text: string
+      href: string
+    }
+
+    export namespace Super {
+      export namespace Sprockets {
+        export interface SprocketProps extends React.PropsWithChildren {
+          groupRef?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
+        }
+
+        export type SprocketState = Record<PropertyKey, unknown>
+      }
+
+      export namespace Components {
+        export namespace Description {
+          export interface DescriptionProps {
+            description?: string
+          }
+        }
+
+        export namespace ErrorMessage {
+          export interface ErrorMessageProps {
+            errorMessage?: string
+          }
+
+          export interface ErrorMessageState {
+            errorMessage?: string
+          }
+        }
+
+        export namespace Group {
+          export type GroupProps = Sprockets.SprocketProps
+
+          export type GroupState = Sprockets.SprocketState
+        }
+
+        export namespace Title {
+          export interface TitleProps {
+            title?: string
+          }
+        }
+      }
+    }
+
+    export namespace Components {
+      export namespace Common {
+        export namespace TextContent {
+          export interface TextContentProps {
+            textContent?: string
+          }
+        }
+
+        export namespace VisuallyHiddenText {
+          export interface VisuallyHiddenTextProps {
+            visuallyHiddenText?: string
+          }
+        }
+      }
+
+      export namespace Description {
+        export type DescriptionProps = Super.Components.Description.DescriptionProps
+      }
+
+      export namespace ErrorMessage {
+        export type ErrorMessageProps = Super.Components.ErrorMessage.ErrorMessageProps
+
+        export type ErrorMessageState = Super.Components.ErrorMessage.ErrorMessageState
+      }
+
+      export namespace Group {
+        export type GroupProps = Super.Components.Group.GroupProps
+
+        export type GroupState = Super.Components.Group.GroupState
+      }
+
+      export namespace Title {
+        export type TitleProps = Super.Components.Title.TitleProps
+      }
+    }
+
+    export namespace Sprockets {
+      export type SprocketProps = Super.Sprockets.SprocketProps
+
+      export type SprocketState = Super.Sprockets.SprocketState
+
+      export namespace CheckAnswers {
+        export interface CheckAnswersProps extends SprocketProps {
+          checkAnswers?: AnswerDefinitionType[]
+        }
+
+        export namespace Group {
+          export interface CheckAnswersProps extends Super.Components.Group.GroupProps {
+            checkAnswers?: AnswerDefinitionType[]
+          }
+
+          export interface CheckAnswersState extends Super.Components.Group.GroupState {
+            checkAnswers?: AnswerDefinitionType[]
+          }
+        }
+
+        export namespace Title {
+          export type CheckAnswersProps = Super.Components.Title.TitleProps
+        }
+      }
+
+      export namespace ErrorSummary {
+        export interface ErrorSummaryProps extends SprocketProps {
+          errorSummary?: ErrorDefinitionType[]
+        }
+
+        export namespace Group {
+          export interface ErrorSummaryProps extends Super.Components.Group.GroupProps {
+            errorSummary?: ErrorDefinitionType[]
+          }
+
+          export interface ErrorSummaryState extends Super.Components.Group.GroupState {
+            errorSummary?: ErrorDefinitionType[]
+          }
+        }
+
+        export namespace Title {
+          export type ErrorSummaryProps = Super.Components.Title.TitleProps
+        }
+      }
+
+      export namespace Fieldset {
+        export type FieldsetProps = SprocketProps
+
+        export type FieldsetState = SprocketState
+
+        export namespace Group {
+          export type FieldsetProps = Super.Components.Group.GroupProps
+
+          export type FieldsetState = Super.Components.Group.GroupState
+        }
+
+        export namespace Title {
+          export type FieldsetProps = Super.Components.Title.TitleProps
+        }
+      }
+    }
   }
 }
 

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,10 @@
+beforeEach(() => {
+  const {
+    body
+  } = document
+
+  Array.from(body.children)
+    .forEach((child) => {
+      body.removeChild(child)
+    })
+})

package/jest.config.mjs

@@ -14,5 +14,15 @@ export default {
     '^.+\\.jsx$': 'babel-jest',
     '^.+\\.mjs$': 'babel-jest'
   },
-  moduleFileExtensions: ['js', 'jsx', 'mjs']
+  transformIgnorePatterns: [
+    '/node_modules\\/(?!react-component-instance)\\/',
+    '/node_modules\\/(?!react-component-snapshot)\\/',
+    '/node_modules\\/(?!react-component-name)\\/'
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'mjs'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [
+    '<rootDir>/jest.before-each.mjs',
+    '<rootDir>/jest.after-each.mjs'
+  ]
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@modernpoacher/sprockets",
-  "version": "0.0.287",
+  "version": "1.0.0",
   "description": "Sprockets",
   "keywords": [
     "Sprockets",
     "React"
   ],
-  "main": "./src/index.cjs",
+  "main": "./src/js/index.mjs",
   "type": "module",
   "types": "./index.d.mts",
   "author": {
@@ -23,57 +23,77 @@
     "url": "git+ssh://git@github.com/modernpoacher/sprockets.git"
   },
   "scripts": {
-    "build": "cross-env DEBUG=@modernpoacher/sprockets* webpack",
+    "build": "cross-env DEBUG=@modernpoacher/sprockets* webpack -c .storybook/webpack.config.mjs",
     "build-storybook": "storybook build",
-    "build:watch": "cross-env DEBUG=@modernpoacher/sprockets* webpack --watch",
-    "lint": "eslint",
-    "lint:fix": "npm run lint -- --fix",
+    "build:watch": "npm run build -- -w",
+    "lint": "npm run lint:js && npm run lint:sass",
+    "lint:fix": "npm run lint:js:fix && npm run lint:sass:fix",
+    "lint:js": "eslint",
+    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint:sass": "stylelint src/sass .storybook/*.scss",
+    "lint:sass:fix": "npm run lint:sass -- --fix",
     "nvm": "bash nvm.sh",
     "prebuild": "npm run nvm",
     "prelint": "npm run nvm",
     "prepare": "husky",
-    "prestorybook": "npm run build && npm run transform",
+    "prestorybook": "npm run build && npm run prettier && npm run transform",
     "pretest": "npm run nvm",
+    "prettier": "prettier src/sass .storybook --write",
     "storybook": "storybook dev -p 6007",
-    "test": "cross-env NODE_ENV=test jest",
-    "transform": "cross-env DEBUG=@modernpoacher/sprockets* ./transform.sh"
+    "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=@modernpoacher/sprockets* .storybook/transform.sh"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "debug": "^4.4.0"
+    "debug": "^4.4.0",
+    "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/eslint-parser": "^7.27.0",
+    "@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.2.0",
-    "@sequencemedia/eslint-config-standard": "^0.2.46",
-    "@sequencemedia/eslint-config-typescript": "^0.1.67",
-    "@storybook/addon-actions": "^8.6.9",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-links": "^8.6.9",
+    "@modernpoacher/design-system": "2.0.2",
+    "@sequencemedia/eslint-config-standard": "^0.2.47",
+    "@sequencemedia/eslint-config-typescript": "^0.1.68",
+    "@storybook/addon-actions": "^8.6.10",
+    "@storybook/addon-essentials": "^8.6.10",
+    "@storybook/addon-links": "^8.6.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/manager-api": "^8.6.9",
-    "@storybook/react": "^8.6.9",
-    "@storybook/react-webpack5": "^8.6.9",
-    "@storybook/theming": "^8.6.9",
-    "@types/react": "18.3.13",
+    "@storybook/manager-api": "^8.6.10",
+    "@storybook/react": "^8.6.10",
+    "@storybook/react-webpack5": "^8.6.10",
+    "@storybook/test": "^8.6.9",
+    "@storybook/theming": "^8.6.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/babel__register": "^7.17.3",
+    "@types/chai": "^5.2.1",
+    "@types/debug": "^4.1.12",
+    "@types/jest": "^29.5.14",
+    "@types/mocha": "^10.0.10",
+    "@types/prop-types": "^15.7.14",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
     "autoprefixer": "^10.4.21",
-    "clean-webpack-plugin": "^4.0.0",
+    "chai": "^5.2.0",
     "core-js": "^3.41.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.23.0",
-    "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-storybook": "^0.12.0",
     "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",
     "postcss": "^8.5.3",
     "postcss-discard-comments": "^7.0.3",
@@ -81,41 +101,79 @@
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
     "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.15",
+    "react-component-snapshot": "^0.0.15",
+    "react-dom": "^19.0.0",
     "react-router": "^7.4.0",
-    "react-test-renderer": "18.3.1",
     "remove-files-webpack-plugin": "^1.5.0",
     "sass": "^1.86.0",
     "sass-loader": "^16.0.5",
-    "storybook": "^8.6.9",
+    "storybook": "^8.6.10",
+    "stylelint": "^16.16.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-scss": "^6.11.1",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   },
   "imports": {
-    "#build/paths": "./build/paths.mjs",
-    "#sprockets": "./src/index.mjs",
-    "#sprockets/common": "./src/common/index.mjs",
-    "#sprockets/components/*": "./src/components/*/index.jsx",
-    "#sprockets/sprockets": "./src/sprockets/index.jsx",
-    "#sprockets/sprockets/*": "./src/sprockets/*/index.jsx",
-    "#sprockets/sprockets/check-answers/group/*": "./src/sprockets/check-answers/group/*.jsx",
-    "#sprockets/sprockets/error-summary/group/*": "./src/sprockets/error-summary/group/*.jsx",
-    "#sprockets/transformers/*": "./src/transformers/*/index.mjs",
+    "#sprockets": {
+      "require": "./src/js/index.cjs",
+      "import": "./src/js/index.mjs"
+    },
+    "#sprockets/components": {
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
+    },
+    "#sprockets/components/*": "./src/js/components/*/index.cjs",
+    "#sprockets/sprockets": "./src/js/sprockets/index.cjs",
+    "#sprockets/sprockets/*": "./src/js/sprockets/*/index.cjs",
+    "#sprockets/sprockets/check-answers/group/*": "./src/js/sprockets/check-answers/group/*.cjs",
+    "#sprockets/sprockets/error-summary/group/*": "./src/js/sprockets/error-summary/group/*.cjs",
+    "#sprockets/super": {
+      "require": "./src/js/super/index.cjs",
+      "import": "./src/js/super/index.mjs"
+    },
+    "#sprockets/super/components": {
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
+    },
+    "#sprockets/super/components/*": "./src/js/super/components/*/index.cjs",
+    "#sprockets/super/sprockets": "./src/js/super/sprockets/index.cjs",
+    "#sprockets/super/sprockets/*": "./src/js/super/sprockets/*/index.cjs",
+    "#sprockets/transformers": "./src/js/transformers/index.mjs",
+    "#sprockets/transformers/*": "./src/js/transformers/*/index.mjs",
+    "#stories/definitions/*": "./stories/definitions/*.json",
     "#stories/sprockets/*": "./stories/sprockets/*/index.stories.jsx"
   },
   "exports": {
     ".": {
-      "require": "./src/index.cjs",
-      "import": "./src/index.mjs"
+      "require": "./src/js/index.cjs",
+      "import": "./src/js/index.mjs"
+    },
+    "./components": {
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
+    },
+    "./components/*": "./src/js/components/*/index.cjs",
+    "./sprockets": "./src/js/sprockets/index.cjs",
+    "./sprockets/*": "./src/js/sprockets/*/index.cjs",
+    "./sprockets/check-answers/group/*": "./src/js/sprockets/check-answers/group/*.cjs",
+    "./sprockets/error-summary/group/*": "./src/js/sprockets/error-summary/group/*.cjs",
+    "./super": {
+      "require": "./src/js/super/index.cjs",
+      "import": "./src/js/super/index.mjs"
+    },
+    "./super/components": {
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
     },
-    "./common": "./src/common/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",
-    "./transformers/*": "./src/transformers/*/index.mjs"
+    "./super/components/*": "./src/js/super/components/*/index.cjs",
+    "./super/sprockets": "./src/js/super/sprockets/index.cjs",
+    "./super/sprockets/*": "./src/js/super/sprockets/*/index.cjs",
+    "./transformers": "./src/js/transformers/index.mjs",
+    "./transformers/*": "./src/js/transformers/*/index.mjs"
   }
 }

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

@@ -0,0 +1,20 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/components/common/text-content')
+
+log('`sprockets` is awake')
+
+const {
+  default: TextContent
+} = require('./index.jsx')
+
+/**
+ *  Exports only default
+ */
+module.exports = TextContent