@modernpoacher/gremlins 0.0.175 → 0.0.177

package/babel.config.cjs

@@ -47,6 +47,7 @@ const plugins = [
         /**
          *  Storybook
          */
+        '@modernpoacher/gremlins/common': './src/common/index.mjs',
         '@modernpoacher/gremlins/gremlins/checkbox/field': './src/gremlins/checkbox/field/index.jsx',
         '@modernpoacher/gremlins/gremlins/checkbox': './src/gremlins/checkbox/index.jsx',
         '@modernpoacher/gremlins/gremlins/email/field': './src/gremlins/email/field/index.jsx',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/gremlins",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "description": "Gremlins",
   "keywords": [
     "Gremlins",
@@ -52,11 +52,11 @@
     "@babel/register": "^7.24.6",
     "@modernpoacher/design-system": "1.0.117",
     "@modernpoacher/hooks": "^1.0.479",
-    "@storybook/addon-actions": "^8.1.10",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@storybook/react-webpack5": "^8.1.10",
+    "@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",
     "@types/react": "^18.3.3",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
@@ -83,7 +83,7 @@
     "remove-files-webpack-plugin": "^1.5.0",
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
-    "storybook": "^8.1.10",
+    "storybook": "7.6.20",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   },
@@ -95,6 +95,7 @@
       "require": "./src/index.cjs",
       "import": "./src/index.mjs"
     },
+    "./common": "./src/common/index.mjs",
     "./components/common/disabled": "./src/components/common/disabled/index.cjs",
     "./components/common/readonly": "./src/components/common/readonly/index.cjs",
     "./components/common/required": "./src/components/common/required/index.cjs",

package/src/common/index.mjs

@@ -0,0 +1,7 @@
+export function DEFAULT_HANDLE_CHANGE () {
+  /* */
+}
+
+export function DEFAULT_HANDLE_CLICK () {
+  /* */
+}

package/src/components/field/index.jsx

@@ -4,13 +4,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-function onChange () {
-  /* */
-}
-
-function onClick () {
-  /* */
-}
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '@modernpoacher/gremlins/common'
 
 export default class Field extends Component {
   getClassName () {
@@ -33,9 +30,9 @@ export default class Field extends Component {
   render () {
     const {
       id,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
@@ -77,7 +74,7 @@ Field.defaultProps = {
   required: false,
   disabled: false,
   readOnly: false,
-  onChange
+  onChange: DEFAULT_HANDLE_CHANGE
 }
 
 /**
@@ -92,7 +89,7 @@ export class ValueField extends Field {
   }
 
   handleChange = ({ target: { value } }) => {
-    const { onChange } = this.props
+    const { onChange = DEFAULT_HANDLE_CHANGE } = this.props
 
     onChange(value)
   }
@@ -121,13 +118,13 @@ export class CheckField extends Field {
   }
 
   handleClick = ({ target: { checked } }) => {
-    const { onClick } = this.props
+    const { onClick = DEFAULT_HANDLE_CLICK } = this.props
 
     onClick(checked)
   }
 
   handleChange = ({ target: { checked } }) => {
-    const { onChange } = this.props
+    const { onChange = DEFAULT_HANDLE_CHANGE } = this.props
 
     onChange(checked)
   }
@@ -142,5 +139,5 @@ CheckField.propTypes = {
 
 CheckField.defaultProps = {
   ...Field.defaultProps,
-  onClick
+  onClick: DEFAULT_HANDLE_CLICK
 }

package/src/components/group/index.jsx

@@ -7,6 +7,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/gremlins/common'
+
 export default class Group extends Component {
   getClassName () {
     return 'group'
@@ -25,7 +29,7 @@ export default class Group extends Component {
 
   render () {
     const {
-      onChange,
+      onChange = DEFAULT_HANDLE_CHANGE,
       groupRef,
       children
     } = this.props

package/src/gremlins/checkbox/field/index.jsx

@@ -18,9 +18,9 @@ export default class CheckboxField extends CheckField {
       id,
       name,
       value,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       fieldRef

package/src/gremlins/checkbox/index.jsx

@@ -38,9 +38,9 @@ export default class CheckboxGremlin extends CheckGremlin {
       value,
       checked,
       defaultChecked,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/email/field/index.jsx

@@ -17,9 +17,9 @@ export default class EmailField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/email/index.jsx

@@ -28,9 +28,9 @@ export default class EmailGremlin extends ValueGremlin {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/fieldset/index.jsx

@@ -9,6 +9,11 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { GroupGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '@modernpoacher/gremlins/common'
+
 import Group from './group/index.jsx'
 
 export default class FieldsetGremlin extends Gremlin {
@@ -18,7 +23,7 @@ export default class FieldsetGremlin extends Gremlin {
 
   renderGroup () {
     const {
-      onChange,
+      onChange = DEFAULT_HANDLE_CHANGE,
       children
     } = this.props
 

package/src/gremlins/index.jsx

@@ -13,23 +13,24 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import Field from '@modernpoacher/gremlins/components/field'
-import Group from '@modernpoacher/gremlins/components/group'
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '@modernpoacher/gremlins/common'
 
-function onChange () {
-  /* */
-}
+import Field, {
+  ValueField,
+  CheckField
+} from '@modernpoacher/gremlins/components/field'
 
-function onClick () {
-  /* */
-}
+import Group from '@modernpoacher/gremlins/components/group'
 
 export class FieldGremlin extends Component {
   getClassName () {
     const {
-      required,
-      disabled,
-      readOnly
+      required = false,
+      disabled = false,
+      readOnly = false
     } = this.props
 
     return classnames('gremlin', { required, disabled, readOnly })
@@ -67,13 +68,13 @@ export class FieldGremlin extends Component {
 
     const {
       name,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,
-      onChange,
+      onChange = DEFAULT_HANDLE_CHANGE,
       fieldRef
     } = this.props
 
@@ -121,7 +122,7 @@ FieldGremlin.defaultProps = {
   required: false,
   disabled: false,
   readOnly: false,
-  onChange
+  onChange: DEFAULT_HANDLE_CHANGE
 }
 
 export class ValueGremlin extends FieldGremlin {
@@ -131,6 +132,37 @@ export class ValueGremlin extends FieldGremlin {
       (props.value !== this.props.value)
     )
   }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_CHANGE,
+      fieldRef
+    } = this.props
+
+    return (
+      <ValueField
+        id={id}
+        name={name}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
 }
 
 ValueGremlin.propTypes = {
@@ -151,6 +183,39 @@ export class CheckGremlin extends FieldGremlin {
       (props.onClick !== this.props.onClick)
     )
   }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange = DEFAULT_HANDLE_CHANGE,
+      onClick = DEFAULT_HANDLE_CLICK,
+      fieldRef
+    } = this.props
+
+    return (
+      <CheckField
+        id={id}
+        name={name}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        onClick={onClick}
+        fieldRef={fieldRef}
+      />
+    )
+  }
 }
 
 CheckGremlin.propTypes = {
@@ -162,7 +227,7 @@ CheckGremlin.propTypes = {
 
 CheckGremlin.defaultProps = {
   ...FieldGremlin.defaultProps,
-  onClick
+  onClick: DEFAULT_HANDLE_CLICK
 }
 
 export class GroupGremlin extends Component {
@@ -183,7 +248,7 @@ export class GroupGremlin extends Component {
 
   renderGroup () {
     const {
-      onChange,
+      onChange = DEFAULT_HANDLE_CHANGE,
       groupRef,
       children
     } = this.props
@@ -222,5 +287,5 @@ GroupGremlin.propTypes = {
 }
 
 GroupGremlin.defaultProps = {
-  onChange
+  onChange: DEFAULT_HANDLE_CHANGE
 }

package/src/gremlins/number/field/index.jsx

@@ -18,9 +18,9 @@ export default class NumberField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/number/index.jsx

@@ -29,9 +29,9 @@ export default class NumberGremlin extends ValueGremlin {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/password/field/index.jsx

@@ -17,9 +17,9 @@ export default class PasswordField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/password/index.jsx

@@ -28,9 +28,9 @@ export default class PasswordGremlin extends ValueGremlin {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/radio/field/index.jsx

@@ -30,9 +30,9 @@ export default class RadioField extends CheckField {
       id,
       name,
       value,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       fieldRef

package/src/gremlins/radio/index.jsx

@@ -45,9 +45,9 @@ export default class Radio extends CheckGremlin {
       value,
       checked,
       defaultChecked,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/select/field/index.jsx

@@ -50,9 +50,9 @@ export default class SelectField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       multiple,

package/src/gremlins/select/index.jsx

@@ -37,9 +37,9 @@ export default class SelectGremlin extends ValueGremlin {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/text/field/index.jsx

@@ -17,9 +17,9 @@ export default class TextField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/text/index.jsx

@@ -28,9 +28,9 @@ export default class TextGremlin extends ValueGremlin {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/textarea/field/index.jsx

@@ -17,9 +17,9 @@ export default class TextareaField extends ValueField {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,

package/src/gremlins/textarea/index.jsx

@@ -28,9 +28,9 @@ export default class TextareaGremlin extends ValueGremlin {
       name,
       value,
       defaultValue,
-      required,
-      disabled,
-      readOnly,
+      required = false,
+      disabled = false,
+      readOnly = false,
       tabIndex,
       accessKey,
       placeholder,