@modernpoacher/gremlins 0.0.311 → 1.0.1

package/.prettierignore

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

package/babel.config.cjs

@@ -51,7 +51,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,
-        GremlinsTypes: '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,
+        GremlinsTypes: '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
+        GremlinsTypes: 'readonly'
       }
-    },
-    plugins: {
-      ...reactPlugins
-    },
-    rules: {
-      ...reactRules
-    },
-    settings: {
-      ...reactSettings
     }
   })
 ]

package/index.d.mts

@@ -1,8 +1,175 @@
+import type React from 'react'
+
 declare global {
   namespace GremlinsTypes {
-    export type OnChangeType = () => void
+    export type OnEventType = (
+      value?: string | string[],
+      checked?: boolean
+    ) => void
+
+    export interface FieldErrorType {
+      text: string
+      href: string
+    }
+
+    export namespace Super {
+      export namespace Gremlins {
+        export interface FieldGremlinProps {
+          id?: string
+          name: string
+          value?: string
+          required?: boolean
+          disabled?: boolean
+          readOnly?: boolean
+          tabIndex?: number
+          accessKey?: string
+          placeholder?: string
+          onChange?: OnEventType
+          fieldRef?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
+        }
+
+        export type FieldGremlinState = Record<PropertyKey, unknown>
+
+        export interface GroupGremlinProps extends React.PropsWithChildren {
+          groupRef?: React.RefObject<any> // eslint-disable-line @typescript-eslint/no-explicit-any -- Simplicity
+        }
+
+        export type GroupGremlinState = Record<PropertyKey, unknown>
+      }
+
+      export namespace Components {
+        export namespace Field {
+          export type FieldProps = Gremlins.FieldGremlinProps
+
+          export type FieldState = Gremlins.FieldGremlinState
+        }
+
+        export namespace Group {
+          export type GroupProps = Gremlins.GroupGremlinProps
+
+          export type GroupState = Gremlins.GroupGremlinState
+        }
+      }
+    }
+
+    export namespace Components {
+      export namespace Common {
+        export namespace TextContent {
+          export interface TextContentProps {
+            textContent?: string
+          }
+        }
+      }
+
+      export namespace Field {
+        export interface ValueProps extends Super.Components.Field.FieldProps {
+          defaultValue?: string
+        }
+
+        export interface CheckProps extends Super.Components.Field.FieldProps {
+          checked?: boolean
+          defaultChecked?: boolean
+          onClick?: OnEventType
+        }
+
+        export namespace Checkbox {
+          export type CheckboxProps = CheckProps
+        }
+
+        export namespace Email {
+          export type EmailProps = ValueProps
+        }
+
+        export namespace Number {
+          export type NumberProps = ValueProps
+        }
+
+        export namespace Password {
+          export type PasswordProps = ValueProps
+        }
+
+        export namespace Radio {
+          export type RadioProps = CheckProps
+        }
+
+        export namespace Select {
+          export interface SelectProps extends ValueProps, React.PropsWithChildren {
+            multiple?: boolean
+          }
+        }
+
+        export namespace Text {
+          export type TextProps = ValueProps
+        }
+
+        export namespace Textarea {
+          export type TextareaProps = ValueProps
+        }
+      }
+
+      export namespace Group {
+        export type GroupProps = Super.Components.Group.GroupProps
+
+        export type FieldsetProps = GroupProps
+      }
+    }
+
+    export namespace Gremlins {
+      export interface ValueProps extends Super.Gremlins.FieldGremlinProps {
+        defaultValue?: string
+      }
+
+      export interface CheckProps extends Super.Gremlins.FieldGremlinProps {
+        checked?: boolean
+        defaultChecked?: boolean
+        onClick?: OnEventType
+      }
+
+      export type GroupProps = Super.Gremlins.GroupGremlinProps
+
+      export namespace Checkbox {
+        export type CheckboxProps = CheckProps
+      }
+
+      export namespace Email {
+        export type EmailProps = ValueProps
+      }
+
+      export namespace Number {
+        export interface NumberProps extends Omit<Omit<ValueProps, 'value'>, 'defaultValue'> {
+          value?: string | number
+          defaultValue?: string | number
+        }
+      }
+
+      export namespace Password {
+        export type PasswordProps = ValueProps
+      }
+
+      export namespace Radio {
+        export type RadioProps = CheckProps
+      }
+
+      export namespace Select {
+        export interface SelectProps extends Omit<Omit<ValueProps, 'value'>, 'defaultValue'>, React.PropsWithChildren {
+          value?: string | string[]
+          defaultValue?: string | string[]
+          multiple?: boolean
+        }
+      }
+
+      export namespace Text {
+        export type TextProps = ValueProps
+      }
+
+      export namespace Textarea {
+        export type TextareaProps = ValueProps
+      }
 
-    export type OnClickType = () => void
+      export namespace Fieldset {
+        export type FieldsetProps = GroupProps
+      }
+    }
   }
 }
 

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/gremlins",
-  "version": "0.0.311",
+  "version": "1.0.1",
   "description": "Gremlins",
   "keywords": [
     "Gremlins",
     "React"
   ],
-  "main": "./src/index.cjs",
+  "main": "./src/js/index.mjs",
   "type": "module",
   "types": "./index.d.mts",
   "author": {
@@ -23,20 +23,27 @@
     "url": "git+ssh://git@github.com/modernpoacher/gremlins.git"
   },
   "scripts": {
-    "build": "cross-env DEBUG=@modernpoacher/gremlins* webpack",
+    "build": "cross-env DEBUG=@modernpoacher/gremlins* webpack -c .storybook/webpack.config.mjs",
     "build-storybook": "storybook build",
-    "build:watch": "cross-env DEBUG=@modernpoacher/gremlins* 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 6008",
-    "test": "cross-env NODE_ENV=test jest",
-    "transform": "cross-env DEBUG=@modernpoacher/gremlins* ./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/gremlins* .storybook/transform.sh"
   },
   "dependencies": {
     "classnames": "^2.5.1",
@@ -49,8 +56,8 @@
     "@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",
+    "@sequencemedia/eslint-config-standard": "^0.2.47",
+    "@sequencemedia/eslint-config-typescript": "^0.1.69",
     "@storybook/addon-actions": "^8.6.10",
     "@storybook/addon-essentials": "^8.6.10",
     "@storybook/addon-links": "^8.6.10",
@@ -58,22 +65,33 @@
     "@storybook/manager-api": "^8.6.10",
     "@storybook/react": "^8.6.10",
     "@storybook/react-webpack5": "^8.6.10",
+    "@storybook/test": "^8.6.10",
     "@storybook/theming": "^8.6.10",
-    "@types/react": "18.3.13",
+    "@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,35 +99,72 @@
     "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-test-renderer": "18.3.1",
+    "react": "^19.0.0",
+    "react-component-instance": "^0.0.16",
+    "react-component-snapshot": "^0.0.16",
+    "react-dom": "^19.0.0",
     "remove-files-webpack-plugin": "^1.5.0",
     "sass": "^1.86.0",
     "sass-loader": "^16.0.5",
     "storybook": "^8.6.10",
+    "stylelint": "^16.17.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",
-    "#gremlins/common": "./src/common/index.mjs",
-    "#gremlins/components/*": "./src/components/*/index.jsx",
-    "#gremlins/gremlins": "./src/gremlins/index.jsx",
-    "#gremlins/gremlins/*": "./src/gremlins/*/index.jsx",
-    "#stories/*": "./stories/*/index.stories.jsx",
+    "#gremlins": {
+      "require": "./src/js/index.cjs",
+      "import": "./src/js/index.mjs"
+    },
+    "#gremlins/components": {
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
+    },
+    "#gremlins/components/*": "./src/js/components/*/index.cjs",
+    "#gremlins/gremlins": "./src/js/gremlins/index.cjs",
+    "#gremlins/gremlins/*": "./src/js/gremlins/*/index.cjs",
+    "#gremlins/super": {
+      "require": "./src/js/super/index.cjs",
+      "import": "./src/js/super/index.mjs"
+    },
+    "#gremlins/super/components": {
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
+    },
+    "#gremlins/super/components/*": "./src/js/super/components/*/index.cjs",
+    "#gremlins/super/gremlins": "./src/js/super/gremlins/index.cjs",
+    "#gremlins/super/gremlins/*": "./src/js/super/gremlins/*/index.cjs",
+    "#stories/errors": "./stories/errors.mjs",
+    "#stories/gremlins/*": "./stories/cogs/gremlins/index.stories.jsx",
     "#stories/state": "./stories/state/index.jsx",
     "#stories/state/*": "./stories/state/*/index.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",
+    "./gremlins": "./src/js/gremlins/index.cjs",
+    "./gremlins/*": "./src/js/gremlins/*/index.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",
-    "./gremlins": "./src/gremlins/index.cjs",
-    "./gremlins/*": "./src/gremlins/*/index.cjs"
+    "./super/components/*": "./src/js/super/components/*/index.cjs",
+    "./super/gremlins": "./src/js/super/gremlins/index.cjs",
+    "./super/gremlins/*": "./src/js/super/gremlins/*/index.cjs"
   }
 }

package/src/{components → js/components}/common/disabled/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/components/common/disabled')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Disabled
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Disabled

package/src/js/components/common/disabled/index.d.cts

@@ -0,0 +1 @@
+export { default } from '#gremlins/components/common/disabled'

package/src/js/components/common/disabled/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DISABLED = String.fromCharCode(42)
+
+export default function Disabled () {
+  return (
+    <span className='is-disabled'>
+      {DISABLED}
+    </span>
+  )
+}

package/src/{components → js/components}/common/readonly/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/components/common/readonly')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: ReadOnly
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = ReadOnly

package/src/js/components/common/readonly/index.d.cts

@@ -0,0 +1 @@
+export { default } from '#gremlins/components/common/readonly'

package/src/js/components/common/readonly/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const READONLY = String.fromCharCode(42)
+
+export default function ReadOnly () {
+  return (
+    <span className='is-readonly'>
+      {READONLY}
+    </span>
+  )
+}