@modernpoacher/gremlins 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+## `@modernpoacher/gremlins`
+
+# Gremlins
+
+_Gremlins_ are React components for input fields.

package/babel.config.cjs

@@ -0,0 +1,106 @@
+const debug = require('debug')
+
+const log = debug('@modernpoacher/gremlins')
+
+const {
+  env: {
+    NODE_ENV = 'development'
+  }
+} = process
+
+log('`gremlins` is awake')
+
+function env () {
+  log({ NODE_ENV })
+
+  return (
+    NODE_ENV === 'production'
+  )
+}
+
+const presets = [
+  [
+    '@babel/env', {
+      targets: {
+        node: 'current',
+        browsers: [
+          'last 4 versions',
+          'safari >= 9',
+          'ios >= 8',
+          'ie >= 9',
+          '> 2%'
+        ]
+      },
+      useBuiltIns: 'usage',
+      corejs: 3
+    }
+  ],
+  '@babel/react'
+]
+
+const plugins = [
+  '@babel/syntax-jsx',
+  '@babel/proposal-export-default-from',
+  '@babel/proposal-export-namespace-from',
+  [
+    '@babel/proposal-class-properties',
+    {
+      loose: false
+    }
+  ],
+  [
+    'module-resolver', {
+      alias: {
+        /**
+         *  Storybook
+         */
+        '@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',
+        '@modernpoacher/gremlins/gremlins/email': './src/gremlins/email/index.jsx',
+        '@modernpoacher/gremlins/gremlins/number/field': './src/gremlins/number/field/index.jsx',
+        '@modernpoacher/gremlins/gremlins/number': './src/gremlins/number/index.jsx',
+        '@modernpoacher/gremlins/gremlins/password/field': './src/gremlins/password/field/index.jsx',
+        '@modernpoacher/gremlins/gremlins/password': './src/gremlins/password/index.jsx',
+        '@modernpoacher/gremlins/gremlins/radio/field': './src/gremlins/radio/field/index.jsx',
+        '@modernpoacher/gremlins/gremlins/radio': './src/gremlins/radio/index.jsx',
+        '@modernpoacher/gremlins/gremlins/select/field': './src/gremlins/select/field/index.jsx',
+        '@modernpoacher/gremlins/gremlins/select': './src/gremlins/select/index.jsx',
+        '@modernpoacher/gremlins/gremlins/text/field': './src/gremlins/text/field/index.jsx',
+        '@modernpoacher/gremlins/gremlins/text': './src/gremlins/text/index.jsx',
+        '@modernpoacher/gremlins/gremlins/textarea/field': './src/gremlins/textarea/field/index.jsx',
+        '@modernpoacher/gremlins/gremlins/textarea': './src/gremlins/textarea/index.jsx',
+        '@modernpoacher/gremlins/gremlins/fieldset/group': './src/gremlins/fieldset/group/index.jsx',
+        '@modernpoacher/gremlins/gremlins/fieldset': './src/gremlins/fieldset/index.jsx',
+        '@modernpoacher/gremlins/gremlins': './src/gremlins/index.jsx',
+        '@modernpoacher/gremlins/components/common/disabled': './src/components/common/disabled/index.jsx',
+        '@modernpoacher/gremlins/components/common/readonly': './src/components/common/readonly/index.jsx',
+        '@modernpoacher/gremlins/components/common/required': './src/components/common/required/index.jsx',
+        '@modernpoacher/gremlins/components/common/text-content': './src/components/common/text-content/index.jsx',
+        '@modernpoacher/gremlins/components/field': './src/components/field/index.jsx',
+        '#stories/state/checkbox': './stories/state/checkbox/index.jsx',
+        '#stories/state/email': './stories/state/email/index.jsx',
+        '#stories/state/number': './stories/state/number/index.jsx',
+        '#stories/state/password': './stories/state/password/index.jsx',
+        '#stories/state/radio': './stories/state/radio/index.jsx',
+        '#stories/state/select': './stories/state/select/index.jsx',
+        '#stories/state/text': './stories/state/text/index.jsx',
+        '#stories/state/textarea': './stories/state/textarea/index.jsx',
+        '#stories/state': './stories/state/index.jsx',
+        '#stories': './stories'
+      }
+    }
+  ]
+]
+
+module.exports = (api) => {
+  if (api) api.cache.using(env)
+
+  return {
+    presets,
+    plugins,
+    ignore: [
+      /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@modernpoacher/gremlins",
+  "version": "0.0.1",
+  "description": "Gremlins",
+  "keywords": [
+    "Gremlins",
+    "React"
+  ],
+  "main": "./src/index.cjs",
+  "type": "module",
+  "author": {
+    "name": "Jonathan Perry for Modern Poacher Limited",
+    "email": "modernpoacher@modernpoacher.com",
+    "url": "https://modernpoacher.com"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com/modernpoacher/gremlins.git"
+  },
+  "scripts": {
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build",
+    "build": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- build",
+    "build:watch": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- build:watch",
+    "transform": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- transform",
+    "transform:watch": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- transform:watch",
+    "pregulp": "npm run nvm",
+    "gulp": "gulp --color",
+    "prelint": "npm run nvm",
+    "lint": "cross-env NODE_ENV=production eslint . .storybook --ext .mjs,.cjs,.jsx,.mts,.cts",
+    "lint:fix": "npm run lint -- --fix",
+    "pretest": "npm run nvm",
+    "test": "cross-env NODE_ENV=test jest",
+    "nvm": "bash nvm.sh",
+    "prestorybook": "npm run build && npm run transform",
+    "storybook": "storybook dev -p 6008",
+    "prepare": "husky install",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "debug": "^4.3.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.22.5",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.22.5",
+    "@modernpoacher/design-system": "1.0.71",
+    "@modernpoacher/hooks": "^1.0.432",
+    "@sequencemedia/gulp": "^1.1.63",
+    "@sequencemedia/gulp-clean-css": "^1.0.29",
+    "@sequencemedia/gulp-css-purge": "^1.1.22",
+    "@sequencemedia/gulp-debug": "^1.0.33",
+    "@sequencemedia/gulp-postcss": "^1.0.32",
+    "@sequencemedia/gulp-sass": "^1.0.28",
+    "@sequencemedia/gulp-sourcemaps": "^1.0.29",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
+    "autoprefixer": "^10.4.15",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "core-js": "^3.32.1",
+    "cross-env": "^7.0.3",
+    "cssnano": "^6.0.1",
+    "del": "^7.1.0",
+    "eslint": "^8.48.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard-with-typescript": "35.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.2",
+    "eslint-plugin-react": "^7.33.2",
+    "glob-all": "^3.3.1",
+    "husky": "^8.0.3",
+    "jest": "^29.6.4",
+    "postcss": "^8.4.29",
+    "postcss-easy-import": "^4.0.0",
+    "postcss-map": "^0.11.0",
+    "postcss-normalize": "^10.0.1",
+    "postcss-scss": "^4.0.7",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "regenerator-runtime": "^0.14.0",
+    "sass": "^1.66.1",
+    "storybook": "^7.4.0",
+    "vinyl-paths": "^5.0.0"
+  },
+  "imports": {
+    "#build/gulp/build/*": "./build/gulp/build/*.mjs",
+    "#build/gulp/build": "./build/gulp/build/index.mjs",
+    "#build/gulp/transform": "./build/gulp/transform/index.mjs",
+    "#build/gulp/*": "./build/gulp/*.mjs",
+    "#build/paths": "./build/paths.mjs"
+  },
+  "exports": {
+    ".": {
+      "require": "./src/index.cjs",
+      "import": "./src/index.mjs"
+    },
+    "./gremlins/checkbox/field": "./src/gremlins/checkbox/field/index.cjs",
+    "./gremlins/checkbox": "./src/gremlins/checkbox/index.cjs",
+    "./gremlins/email/field": "./src/gremlins/email/field/index.cjs",
+    "./gremlins/email": "./src/gremlins/email/index.cjs",
+    "./gremlins/number/field": "./src/gremlins/number/field/index.cjs",
+    "./gremlins/number": "./src/gremlins/number/index.cjs",
+    "./gremlins/password/field": "./src/gremlins/password/field/index.cjs",
+    "./gremlins/password": "./src/gremlins/password/index.cjs",
+    "./gremlins/radio/field": "./src/gremlins/radio/field/index.cjs",
+    "./gremlins/radio": "./src/gremlins/radio/index.cjs",
+    "./gremlins/select/field": "./src/gremlins/select/field/index.cjs",
+    "./gremlins/select": "./src/gremlins/select/index.cjs",
+    "./gremlins/text/field": "./src/gremlins/text/field/index.cjs",
+    "./gremlins/text": "./src/gremlins/text/index.cjs",
+    "./gremlins/textarea/field": "./src/gremlins/textarea/field/index.cjs",
+    "./gremlins/textarea": "./src/gremlins/textarea/index.cjs",
+    "./gremlins/fieldset/group": "./src/gremlins/fieldset/group/index.cjs",
+    "./gremlins/fieldset": "./src/gremlins/fieldset/index.cjs",
+    "./gremlins": "./src/gremlins/index.cjs",
+    "./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",
+    "./components/common/text-content": "./src/components/common/text-content/index.cjs",
+    "./components/field": "./src/components/field/index.cjs",
+    "./components/group": "./src/components/group/index.cjs"
+  }
+}

package/src/components/common/disabled/index.cjs

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

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

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

package/src/components/common/readonly/index.cjs

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

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

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

package/src/components/common/required/index.cjs

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

package/src/components/common/required/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const REQUIRED = String.fromCharCode(42)
+
+export default () => (
+  <span className='is-required'>
+    {REQUIRED}
+  </span>
+)

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * TextContent component
+ *
+ * @typedef {import('@modernpoacher/gremlins/components/common/text-content').TextContentProps} TextContentProps
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * @param {TextContentProps}
+ * @returns {React.JSX.Element}
+ */
+const TextContent = ({ textContent }) => (
+  <span className='text-content'>
+    {textContent}
+  </span>
+)
+
+TextContent.propTypes = {
+  textContent: PropTypes.string.isRequired
+}
+
+export default TextContent

package/src/components/field/index.cjs

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

package/src/components/field/index.jsx

@@ -0,0 +1,146 @@
+/**
+ * Field component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+function onChange () {
+  /* */
+}
+
+function onClick () {
+  /* */
+}
+
+export default class Field extends Component {
+  getClassName () {
+    return 'input'
+  }
+
+  shouldComponentUpdate (props) {
+    return (
+      (props.id !== this.props.id) ||
+      (props.required !== this.props.required) ||
+      (props.disabled !== this.props.disabled) ||
+      (props.readOnly !== this.props.readOnly) ||
+      (props.tabIndex !== this.props.tabIndex) ||
+      (props.accessKey !== this.props.accessKey) ||
+      (props.placeholder !== this.props.placeholder) ||
+      (props.onChange !== this.props.onChange)
+    )
+  }
+
+  render () {
+    const {
+      id,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    return (
+      <input
+        id={id}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        className={this.getClassName()}
+        ref={fieldRef}
+      />
+    )
+  }
+}
+
+Field.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  accessKey: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+Field.defaultProps = {
+  required: false,
+  disabled: false,
+  readOnly: false,
+  onChange
+}
+
+/**
+ * ValueField component
+ */
+export class ValueField extends Field {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.value !== this.props.value)
+    )
+  }
+
+  handleChange = ({ target: { value } }) => {
+    const { onChange } = this.props
+
+    onChange(value)
+  }
+}
+
+ValueField.propTypes = {
+  ...Field.propTypes,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string
+}
+
+ValueField.defaultProps = {
+  ...Field.defaultProps
+}
+
+/**
+ * CheckField component
+ */
+export class CheckField extends Field {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.checked !== this.props.checked) ||
+      (props.onClick !== this.props.onClick)
+    )
+  }
+
+  handleClick = ({ target: { checked } }) => {
+    const { onClick } = this.props
+
+    onClick(checked)
+  }
+
+  handleChange = ({ target: { checked } }) => {
+    const { onChange } = this.props
+
+    onChange(checked)
+  }
+}
+
+CheckField.propTypes = {
+  ...Field.propTypes,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
+CheckField.defaultProps = {
+  ...Field.defaultProps,
+  onClick
+}

package/src/components/group/index.cjs

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/components/group')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/components/group/index.jsx

@@ -0,0 +1,55 @@
+/**
+ * Group component
+ *
+ * @typedef {import('@modernpoacher/gremlins/components/group').GroupProps} GroupProps
+ */
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class Group extends Component {
+  getClassName () {
+    return 'group'
+  }
+
+  /**
+   * @param {GroupProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.onChange !== this.props.onChange) ||
+      (props.children !== this.props.children)
+    )
+  }
+
+  render () {
+    const {
+      onChange,
+      groupRef,
+      children
+    } = this.props
+
+    return (
+      <fieldset
+        onChange={onChange}
+        className={this.getClassName()}
+        ref={groupRef}>
+        {children}
+      </fieldset>
+    )
+  }
+}
+
+Group.propTypes = {
+  onChange: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}

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

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/gremlins/gremlins/checkbox/field')
+
+log('`gremlins` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component