@modernpoacher/cogs 0.1.256 → 1.0.0

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
     }
   }),
   /**
@@ -174,80 +180,35 @@ export default [
     ],
     ignores: [
       'src',
-      'stories'
-    ],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        CogsTypes: 'readonly'
-      }
-    }
-  }),
-  typescript({
-    files: [
-      'src/**/*.{mts,cts}'
-    ],
-    languageOptions: {
-      globals: {
-        ...globals.browser
-      }
-    }
-  }),
-  /**
-   *  TypeScript config for only `tsx` files
-   */
-  typescript({
-    files: [
-      'src/**/*.tsx'
-    ],
-    ignores: [
-      'src/**/__tests__/**/*.tsx'
+      'test'
     ],
     languageOptions: {
       parser: typescriptParser,
       parserOptions: {
-        ...reactParserOptions,
         projectService: true,
         project: 'tsconfig.json'
       },
       globals: {
-        ...globals.browser
+        ...globals.node,
+        CogsTypes: '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
+        CogsTypes: 'readonly'
       }
-    },
-    plugins: {
-      ...reactPlugins
-    },
-    rules: {
-      ...reactRules
-    },
-    settings: {
-      ...reactSettings
     }
   })
 ]

package/index.d.mts

@@ -1,12 +1,230 @@
+import type React from 'react'
+
 declare global {
   namespace CogsTypes {
-    export type onEventType = () => void
+    export type OnEventType = (
+      value?: string | string[],
+      checked?: boolean
+    ) => void
+
+    export interface FieldErrorType {
+      text: string
+      href: string
+    }
+
+    export namespace Super {
+      export namespace Cogs {
+        export interface CogProps {
+          id?: string
+          name: string
+          title?: string
+          value?: string
+          description?: string
+          errorMessage?: 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 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 Field {
+          export interface FieldProps extends React.PropsWithChildren {
+            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 namespace Title {
+          export interface TitleProps extends React.PropsWithChildren {
+            id: string
+            title?: string
+            required?: boolean
+            disabled?: boolean
+            readOnly?: boolean
+          }
+        }
+      }
+    }
+
+    export namespace Components {
+      export namespace Common {
+        export namespace TextContent {
+          export interface TextContentProps {
+            textContent?: 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 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 Title {
+        export namespace Checkbox {
+          export type CheckboxProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Email {
+          export type EmailProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Number {
+          export type NumberProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Password {
+          export type PasswordProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Radio {
+          export type RadioProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Select {
+          export type SelectProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Text {
+          export type TextProps = Super.Components.Title.TitleProps
+        }
+
+        export namespace Textarea {
+          export type TextareaProps = Super.Components.Title.TitleProps
+        }
+      }
+    }
+
+    export namespace Cogs {
+      export interface ValueProps extends Super.Cogs.CogProps {
+        defaultValue?: string
+      }
+
+      export interface CheckProps extends Super.Cogs.CogProps {
+        checked?: boolean
+        defaultChecked?: boolean
+        onClick?: OnEventType
+      }
+
+      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 interface ErrorDefinitionType {
-      type: string
-      uri: string
-      params: {
-        expectedType: string
+      export namespace Textarea {
+        export type TextareaProps = ValueProps
       }
     }
   }

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/cogs",
-  "version": "0.1.256",
+  "version": "1.0.0",
   "description": "Cogs",
   "keywords": [
     "Cogs",
     "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/cogs.git"
   },
   "scripts": {
-    "build": "cross-env DEBUG=@modernpoacher/cogs* webpack",
+    "build": "cross-env DEBUG=@modernpoacher/cogs* webpack -c .storybook/webpack.config.mjs",
     "build-storybook": "storybook build",
-    "build:watch": "cross-env DEBUG=@modernpoacher/cogs* 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 6006",
-    "test": "cross-env NODE_ENV=test jest",
-    "transform": "cross-env DEBUG=@modernpoacher/cogs* ./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/cogs* .storybook/transform.sh"
   },
   "dependencies": {
     "classnames": "^2.5.1",
@@ -48,32 +55,43 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@modernpoacher/design-system": "1.2.0",
+    "@modernpoacher/design-system": "2.0.2",
     "@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",
+    "@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,36 +99,71 @@
     "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.15",
+    "react-component-snapshot": "^0.0.15",
+    "react-dom": "^19.0.0",
     "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",
-    "#cogs": "./src/index.mjs",
-    "#cogs/cogs": "./src/cogs/index.jsx",
-    "#cogs/cogs/*": "./src/cogs/*/index.jsx",
-    "#cogs/common": "./src/common/index.mjs",
-    "#cogs/components/*": "./src/components/*/index.jsx",
+    "#cogs": {
+      "require": "./src/js/index.cjs",
+      "import": "./src/js/index.mjs"
+    },
+    "#cogs/cogs": "./src/js/cogs/index.cjs",
+    "#cogs/cogs/*": "./src/js/cogs/*/index.cjs",
+    "#cogs/components": {
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
+    },
+    "#cogs/components/*": "./src/js/components/*/index.cjs",
+    "#cogs/super": {
+      "require": "./src/js/super/index.cjs",
+      "import": "./src/js/super/index.mjs"
+    },
+    "#cogs/super/cogs": "./src/js/super/cogs/index.cjs",
+    "#cogs/super/cogs/*": "./src/js/super/cogs/*/index.cjs",
+    "#cogs/super/components": {
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
+    },
+    "#cogs/super/components/*": "./src/js/super/components/*/index.cjs",
     "#stories/cogs/*": "./stories/cogs/*/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"
+    },
+    "./cogs": "./src/js/cogs/index.cjs",
+    "./cogs/*": "./src/js/cogs/*/index.cjs",
+    "./components": {
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
+    },
+    "./components/*": "./src/js/components/*/index.cjs",
+    "./super": {
+      "require": "./src/js/super/index.cjs",
+      "import": "./src/js/super/index.mjs"
+    },
+    "./super/cogs": "./src/js/super/cogs/index.cjs",
+    "./super/cogs/*": "./src/js/super/cogs/*/index.cjs",
+    "./super/components": {
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
     },
-    "./cogs": "./src/cogs/index.cjs",
-    "./cogs/*": "./src/cogs/*/index.cjs",
-    "./common": "./src/common/index.mjs",
-    "./components/*": "./src/components/*/index.cjs"
+    "./super/components/*": "./src/js/super/components/*/index.cjs"
   }
 }