@modernpoacher/cogs 0.0.4

package/README.md

@@ -0,0 +1,11 @@
+## `@modernpoacher/cogs`
+
+# Cogs
+
+_Cogs_ are React components for input fields.
+
+_Cogs_ are composed into _Sprockets_.
+
+## See also
+
+- [Sprockets](https://github.com/modernpoacher/sprockets)

package/babel.config.cjs

@@ -0,0 +1,131 @@
+const debug = require('debug')
+
+const log = debug('@modernpoacher/cogs')
+
+const {
+  env: {
+    NODE_ENV = 'development'
+  }
+} = process
+
+log('`cogs` 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/cogs/cogs/checkbox/error-message': './src/cogs/checkbox/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/checkbox/description': './src/cogs/checkbox/description/index.jsx',
+        '@modernpoacher/cogs/cogs/checkbox/field': './src/cogs/checkbox/field/index.jsx',
+        '@modernpoacher/cogs/cogs/checkbox/title': './src/cogs/checkbox/title/index.jsx',
+        '@modernpoacher/cogs/cogs/checkbox': './src/cogs/checkbox/index.jsx',
+        '@modernpoacher/cogs/cogs/email/error-message': './src/cogs/email/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/email/description': './src/cogs/email/description/index.jsx',
+        '@modernpoacher/cogs/cogs/email/field': './src/cogs/email/field/index.jsx',
+        '@modernpoacher/cogs/cogs/email/title': './src/cogs/email/title/index.jsx',
+        '@modernpoacher/cogs/cogs/email': './src/cogs/email/index.jsx',
+        '@modernpoacher/cogs/cogs/number/error-message': './src/cogs/number/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/number/description': './src/cogs/number/description/index.jsx',
+        '@modernpoacher/cogs/cogs/number/field': './src/cogs/number/field/index.jsx',
+        '@modernpoacher/cogs/cogs/number/title': './src/cogs/number/title/index.jsx',
+        '@modernpoacher/cogs/cogs/number': './src/cogs/number/index.jsx',
+        '@modernpoacher/cogs/cogs/password/error-message': './src/cogs/password/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/password/description': './src/cogs/password/description/index.jsx',
+        '@modernpoacher/cogs/cogs/password/field': './src/cogs/password/field/index.jsx',
+        '@modernpoacher/cogs/cogs/password/title': './src/cogs/password/title/index.jsx',
+        '@modernpoacher/cogs/cogs/password': './src/cogs/password/index.jsx',
+        '@modernpoacher/cogs/cogs/radio/error-message': './src/cogs/radio/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/radio/description': './src/cogs/radio/description/index.jsx',
+        '@modernpoacher/cogs/cogs/radio/field': './src/cogs/radio/field/index.jsx',
+        '@modernpoacher/cogs/cogs/radio/title': './src/cogs/radio/title/index.jsx',
+        '@modernpoacher/cogs/cogs/radio': './src/cogs/radio/index.jsx',
+        '@modernpoacher/cogs/cogs/select/error-message': './src/cogs/select/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/select/description': './src/cogs/select/description/index.jsx',
+        '@modernpoacher/cogs/cogs/select/field': './src/cogs/select/field/index.jsx',
+        '@modernpoacher/cogs/cogs/select/title': './src/cogs/select/title/index.jsx',
+        '@modernpoacher/cogs/cogs/select': './src/cogs/select/index.jsx',
+        '@modernpoacher/cogs/cogs/text/error-message': './src/cogs/text/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/text/description': './src/cogs/text/description/index.jsx',
+        '@modernpoacher/cogs/cogs/text/field': './src/cogs/text/field/index.jsx',
+        '@modernpoacher/cogs/cogs/text/title': './src/cogs/text/title/index.jsx',
+        '@modernpoacher/cogs/cogs/text': './src/cogs/text/index.jsx',
+        '@modernpoacher/cogs/cogs/textarea/description': './src/cogs/textarea/description/index.jsx',
+        '@modernpoacher/cogs/cogs/textarea/error-message': './src/cogs/textarea/error-message/index.jsx',
+        '@modernpoacher/cogs/cogs/textarea/field': './src/cogs/textarea/field/index.jsx',
+        '@modernpoacher/cogs/cogs/textarea/title': './src/cogs/textarea/title/index.jsx',
+        '@modernpoacher/cogs/cogs/textarea': './src/cogs/textarea/index.jsx',
+        '@modernpoacher/cogs/cogs': './src/cogs/index.jsx',
+        '@modernpoacher/cogs/components/common/disabled': './src/components/common/disabled/index.jsx',
+        '@modernpoacher/cogs/components/common/readonly': './src/components/common/readonly/index.jsx',
+        '@modernpoacher/cogs/components/common/required': './src/components/common/required/index.jsx',
+        '@modernpoacher/cogs/components/common/text-content': './src/components/common/text-content/index.jsx',
+        '@modernpoacher/cogs/components/description': './src/components/description/index.jsx',
+        '@modernpoacher/cogs/components/error-message': './src/components/error-message/index.jsx',
+        '@modernpoacher/cogs/components/field': './src/components/field/index.jsx',
+        '@modernpoacher/cogs/components/title': './src/components/title/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\/sprockets)/
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,163 @@
+{
+  "name": "@modernpoacher/cogs",
+  "version": "0.0.4",
+  "description": "Cogs",
+  "keywords": [
+    "Cogs",
+    "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/cogs.git"
+  },
+  "scripts": {
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build",
+    "build": "cross-env DEBUG=@modernpoacher/cogs npm run gulp -- build",
+    "build:watch": "cross-env DEBUG=@modernpoacher/cogs npm run gulp -- build:watch",
+    "transform": "cross-env DEBUG=@modernpoacher/cogs npm run gulp -- transform",
+    "transform:watch": "cross-env DEBUG=@modernpoacher/cogs 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 6006",
+    "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"
+    },
+    "./cogs/checkbox/description": "./src/cogs/checkbox/description/index.cjs",
+    "./cogs/checkbox/error-message": "./src/cogs/checkbox/error-message/index.cjs",
+    "./cogs/checkbox/field": "./src/cogs/field/checkbox/index.cjs",
+    "./cogs/checkbox/title": "./src/cogs/title/checkbox/index.cjs",
+    "./cogs/checkbox": "./src/cogs/checkbox/index.cjs",
+    "./cogs/email/description": "./src/cogs/email/description/index.cjs",
+    "./cogs/email/error-message": "./src/cogs/email/error-message/index.cjs",
+    "./cogs/email/field": "./src/cogs/field/email/index.cjs",
+    "./cogs/email/title": "./src/cogs/title/email/index.cjs",
+    "./cogs/email": "./src/cogs/email/index.cjs",
+    "./cogs/number/description": "./src/cogs/number/description/index.cjs",
+    "./cogs/number/error-message": "./src/cogs/number/error-message/index.cjs",
+    "./cogs/number/field": "./src/cogs/field/number/index.cjs",
+    "./cogs/number/title": "./src/cogs/title/number/index.cjs",
+    "./cogs/number": "./src/cogs/number/index.cjs",
+    "./cogs/password/description": "./src/cogs/password/description/index.cjs",
+    "./cogs/password/error-message": "./src/cogs/password/error-message/index.cjs",
+    "./cogs/password/field": "./src/cogs/field/password/index.cjs",
+    "./cogs/password/title": "./src/cogs/title/password/index.cjs",
+    "./cogs/password": "./src/cogs/password/index.cjs",
+    "./cogs/radio/description": "./src/cogs/radio/description/index.cjs",
+    "./cogs/radio/error-message": "./src/cogs/radio/error-message/index.cjs",
+    "./cogs/radio/field": "./src/cogs/field/radio/index.cjs",
+    "./cogs/radio/title": "./src/cogs/title/radio/index.cjs",
+    "./cogs/radio": "./src/cogs/radio/index.cjs",
+    "./cogs/select/description": "./src/cogs/select/description/index.cjs",
+    "./cogs/select/error-message": "./src/cogs/select/error-message/index.cjs",
+    "./cogs/select/field": "./src/cogs/field/select/index.cjs",
+    "./cogs/select/title": "./src/cogs/title/select/index.cjs",
+    "./cogs/select": "./src/cogs/select/index.cjs",
+    "./cogs/text/description": "./src/cogs/text/description/index.cjs",
+    "./cogs/text/error-message": "./src/cogs/text/error-message/index.cjs",
+    "./cogs/text/field": "./src/cogs/field/text/index.cjs",
+    "./cogs/text/title": "./src/cogs/title/text/index.cjs",
+    "./cogs/text": "./src/cogs/text/index.cjs",
+    "./cogs/textarea/description": "./src/components/textarea/description/index.cjs",
+    "./cogs/textarea/error-message": "./src/components/textarea/error-message/index.cjs",
+    "./cogs/textarea/field": "./src/components/field/textarea/index.cjs",
+    "./cogs/textarea/title": "./src/components/title/textarea/index.cjs",
+    "./cogs/textarea": "./src/cogs/textarea/index.cjs",
+    "./cogs": "./src/cogs/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/description": "./src/components/description/index.cjs",
+    "./components/error-message": "./src/components/error-message/index.cjs",
+    "./components/field": "./src/components/field/index.cjs",
+    "./components/title": "./src/components/title/index.cjs"
+  }
+}

package/src/cogs/checkbox/description/index.cjs

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

package/src/cogs/checkbox/description/index.jsx

@@ -0,0 +1,19 @@
+/**
+ * CheckboxDescription component
+ */
+import classnames from 'classnames'
+import Description from '@modernpoacher/cogs/components/description'
+
+export default class CheckboxDescription extends Description {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+}
+
+CheckboxDescription.propTypes = {
+  ...Description.propTypes
+}
+
+CheckboxDescription.defaultProps = {
+  ...Description.defaultProps
+}

package/src/cogs/checkbox/error-message/index.cjs

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

package/src/cogs/checkbox/error-message/index.jsx

@@ -0,0 +1,19 @@
+/**
+ * CheckboxErrorMessage component
+ */
+import classnames from 'classnames'
+import ErrorMessage from '@modernpoacher/cogs/components/error-message'
+
+export default class CheckboxErrorMessage extends ErrorMessage {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+}
+
+CheckboxErrorMessage.propTypes = {
+  ...ErrorMessage.propTypes
+}
+
+CheckboxErrorMessage.defaultProps = {
+  ...ErrorMessage.defaultProps
+}

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * CheckboxField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { CheckField } from '@modernpoacher/cogs/components/field'
+
+export default class CheckboxField extends CheckField {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+
+  render () {
+    const {
+      id,
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    return (
+      <input
+        id={id}
+        name={name}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        onClick={this.handleClick}
+        onChange={this.handleChange}
+        className={className}
+        type='checkbox'
+        ref={fieldRef}
+      />
+    )
+  }
+}
+
+CheckboxField.propTypes = {
+  ...CheckField.propTypes
+}
+
+CheckboxField.defaultProps = {
+  ...CheckField.defaultProps
+}

package/src/cogs/checkbox/index.cjs

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

package/src/cogs/checkbox/index.jsx

@@ -0,0 +1,135 @@
+/**
+ * CheckboxCog component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { CheckCog } from '@modernpoacher/cogs/cogs'
+
+import Title from './title/index.jsx'
+import Description from './description/index.jsx'
+import ErrorMessage from './error-message/index.jsx'
+import Field from './field/index.jsx'
+
+export default class CheckboxCog extends CheckCog {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+
+  handleClick = (value) => {
+    const {
+      onClick
+    } = this.props
+
+    onClick(value)
+  }
+
+  handleChange = (value) => {
+    const {
+      onChange
+    } = this.props
+
+    onChange(value)
+  }
+
+  renderTitle () {
+    const id = this.getId()
+
+    const {
+      title,
+      required,
+      disabled,
+      readOnly
+    } = this.props
+
+    return (
+      <Title
+        id={id}
+        title={title}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+    )
+  }
+
+  renderDescription () {
+    const {
+      description
+    } = this.props
+
+    return (
+      <Description
+        description={description}
+      />
+    )
+  }
+
+  renderErrorMessage () {
+    const {
+      errorMessage
+    } = this.props
+
+    return (
+      <ErrorMessage
+        errorMessage={errorMessage}
+      />
+    )
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    return (
+      <Field
+        id={id}
+        name={name}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onClick={this.handleClick}
+        onChange={this.handleChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderField()}
+        {this.renderTitle()}
+        {this.renderDescription()}
+        {this.renderErrorMessage()}
+      </div>
+    )
+  }
+}
+
+CheckboxCog.propTypes = {
+  ...CheckCog.propTypes
+}
+
+CheckboxCog.defaultProps = {
+  ...CheckCog.defaultProps
+}

package/src/cogs/checkbox/title/index.cjs

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

package/src/cogs/checkbox/title/index.jsx

@@ -0,0 +1,19 @@
+/**
+ * CheckboxTitle component
+ */
+import classnames from 'classnames'
+import Title from '@modernpoacher/cogs/components/title'
+
+export default class CheckboxTitle extends Title {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+}
+
+CheckboxTitle.propTypes = {
+  ...Title.propTypes
+}
+
+CheckboxTitle.defaultProps = {
+  ...Title.defaultProps
+}

package/src/cogs/email/description/index.cjs

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