@thednp/color-picker 1.0.0 → 2.0.0-alpha1

package/.eslintrc.cjs

@@ -0,0 +1,199 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+  },
+  plugins: [
+    'eslint-plugin-jsdoc',
+    'eslint-plugin-prefer-arrow',
+    // "eslint-plugin-react",
+    '@typescript-eslint',
+    'prettier',
+  ],
+  root: true,
+  rules: {
+    'prettier/prettier': 'error',
+    '@typescript-eslint/adjacent-overload-signatures': 'error',
+    '@typescript-eslint/array-type': [
+      'error',
+      {
+        default: 'array',
+      },
+    ],
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          Object: {
+            message: 'Avoid using the `Object` type. Did you mean `object`?',
+          },
+          Function: {
+            message: 'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.',
+          },
+          Boolean: {
+            message: 'Avoid using the `Boolean` type. Did you mean `boolean`?',
+          },
+          Number: {
+            message: 'Avoid using the `Number` type. Did you mean `number`?',
+          },
+          String: {
+            message: 'Avoid using the `String` type. Did you mean `string`?',
+          },
+          Symbol: {
+            message: 'Avoid using the `Symbol` type. Did you mean `symbol`?',
+          },
+        },
+      },
+    ],
+    '@typescript-eslint/unbound-method': 'off',
+    '@typescript-eslint/consistent-type-assertions': 'error',
+    '@typescript-eslint/dot-notation': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/indent': 'off',
+    '@typescript-eslint/member-delimiter-style': [
+      'off',
+      {
+        multiline: {
+          delimiter: 'none',
+          requireLast: true,
+        },
+        singleline: {
+          delimiter: 'semi',
+          requireLast: false,
+        },
+      },
+    ],
+    '@typescript-eslint/naming-convention': 'off', // error
+    '@typescript-eslint/no-empty-function': 'error',
+    '@typescript-eslint/no-empty-interface': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-misused-new': 'error',
+    '@typescript-eslint/no-namespace': 'error',
+    '@typescript-eslint/no-parameter-properties': 'off',
+    '@typescript-eslint/no-shadow': [
+      'error',
+      {
+        hoist: 'all',
+      },
+    ],
+    '@typescript-eslint/no-unused-expressions': 'error',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-var-requires': 'error',
+    '@typescript-eslint/prefer-for-of': 'error',
+    '@typescript-eslint/prefer-function-type': 'error',
+    '@typescript-eslint/prefer-namespace-keyword': 'error',
+    '@typescript-eslint/quotes': 'off',
+    '@typescript-eslint/semi': ['off', null],
+    '@typescript-eslint/triple-slash-reference': [
+      'error',
+      {
+        path: 'always',
+        types: 'prefer-import',
+        lib: 'always',
+      },
+    ],
+    '@typescript-eslint/type-annotation-spacing': 'off',
+    '@typescript-eslint/typedef': 'off',
+    '@typescript-eslint/unified-signatures': 'error',
+    'arrow-parens': ['off', 'always'],
+    'brace-style': ['off', 'off'],
+    'comma-dangle': 'off',
+    complexity: 'off',
+    'constructor-super': 'error',
+    'dot-notation': 'off',
+    'eol-last': 'off',
+    eqeqeq: ['error', 'smart'],
+    'guard-for-in': 'error',
+    'id-denylist': [
+      'error',
+      'any',
+      'Number',
+      'number',
+      'String',
+      'string',
+      'Boolean',
+      'boolean',
+      'Undefined',
+      'undefined',
+    ],
+    'id-match': 'error',
+    indent: 'off',
+    'jsdoc/check-alignment': 'error',
+    'jsdoc/check-indentation': 'error',
+    'jsdoc/newline-after-description': 'error',
+    'linebreak-style': 'off',
+    'max-classes-per-file': ['error', 1],
+    'max-len': 'off',
+    'new-parens': 'off',
+    'newline-per-chained-call': 'off',
+    'no-bitwise': 'error',
+    'no-caller': 'error',
+    'no-cond-assign': 'error',
+    'no-console': 'error',
+    'no-debugger': 'error',
+    'no-empty': 'error',
+    'no-empty-function': 'off',
+    'no-eval': 'error',
+    'no-extra-semi': 'off',
+    'no-fallthrough': 'off',
+    'no-invalid-this': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-multiple-empty-lines': 'off',
+    'no-new-wrappers': 'error',
+    'no-shadow': 'off',
+    'no-throw-literal': 'error',
+    'no-trailing-spaces': 'off',
+    'no-undef-init': 'error',
+    'no-underscore-dangle': 'off',
+    'no-unsafe-finally': 'error',
+    'no-unused-expressions': 'off',
+    'no-unused-labels': 'error',
+    'no-use-before-define': 'off',
+    'no-var': 'error',
+    'object-shorthand': 'error',
+    'one-var': ['error', 'never'],
+    'padded-blocks': [
+      'off',
+      {
+        blocks: 'never',
+      },
+      {
+        allowSingleLineBlocks: true,
+      },
+    ],
+    'prefer-arrow/prefer-arrow-functions': 'error',
+    'prefer-const': 'error',
+    'quote-props': 'off',
+    quotes: 'off',
+    radix: 'error',
+    // "react/jsx-curly-spacing": "off",
+    // "react/jsx-equals-spacing": "off",
+    // "react/jsx-tag-spacing": [
+    //     "off",
+    //     {
+    //         "afterOpening": "allow",
+    //         "closingSlash": "allow"
+    //     }
+    // ],
+    // "react/jsx-wrap-multilines": "off",
+    semi: 'off',
+    'space-before-function-paren': 'off',
+    'space-in-parens': ['off', 'never'],
+    'spaced-comment': [
+      'error',
+      'always',
+      {
+        markers: ['/'],
+      },
+    ],
+    'use-isnan': 'error',
+    'valid-typeof': 'off',
+  },
+};

package/.lgtm.yml

@@ -0,0 +1,9 @@
+extraction:
+  typescript:
+    index:
+      exclude:
+        - coverage
+        - cypress
+        - docs
+        - experiments
+        - node_modules

package/.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

package/.stylelintrc.json

@@ -0,0 +1,236 @@
+{
+  "plugins": [
+    "stylelint-scss",
+    "stylelint-order"
+  ],
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "color-named": "never",
+    "declaration-block-no-duplicate-properties": true,
+    "no-descending-specificity": null,
+    "color-function-notation": null,
+    "block-no-empty": true,
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "max-nesting-depth": 4,
+    "selector-max-compound-selectors": 5,
+    "order/properties-order": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "box-sizing",
+      "display",
+      "flex",
+      "flex-align",
+      "flex-basis",
+      "flex-direction",
+      "flex-wrap",
+      "flex-flow",
+      "flex-grow",
+      "flex-order",
+      "flex-pack",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-style",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "word-break",
+      "word-spacing",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "background-clip",
+      "background-origin",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "border-image",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "box-shadow",
+      "opacity",
+      "-ms-interpolation-mode",
+      "transition",
+      "transition-delay",
+      "transition-timing-function",
+      "transition-duration",
+      "transition-property",
+      "transform",
+      "transform-origin",
+      "animation",
+      "animation-name",
+      "animation-duration",
+      "animation-play-state",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction"
+    ],
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "length-zero-no-unit": true,
+    "property-no-unknown": true,
+    "property-no-vendor-prefix": true,
+    "scss/dollar-variable-colon-space-before": "never",
+    "scss/selector-no-redundant-nesting-selector": true,
+    "shorthand-property-no-redundant-values": true,
+    "unit-allowed-list": [
+      "ch",
+      "em",
+      "ex",
+      "rem",
+      "cm",
+      "in",
+      "mm",
+      "pc",
+      "pt",
+      "px",
+      "q",
+      "vh",
+      "vw",
+      "vmin",
+      "vmax",
+      "fr",
+      "deg",
+      "grad",
+      "rad",
+      "turn",
+      "ms",
+      "s",
+      "Hz",
+      "kHz",
+      "dpi",
+      "dpcm",
+      "dppx",
+      "%"
+    ],
+    "value-no-vendor-prefix": true
+  }
+}

package/README.md

@@ -1,129 +1,112 @@
-# ColorPicker [![Coverage Status](https://coveralls.io/repos/github/thednp/color-picker/badge.svg?branch=main)](https://coveralls.io/github/thednp/color-picker?branch=main) ![cypress version](https://img.shields.io/badge/cypress-9.6.0-brightgreen) ![typescript version](https://img.shields.io/badge/typescript-4.5.2-brightgreen) [![ci](https://github.com/thednp/color-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/color-picker/actions/workflows/ci.yml)
+## ColorPicker
 
-The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
+[![Coverage Status](https://coveralls.io/repos/github/thednp/color-picker/badge.svg)](https://coveralls.io/github/thednp/color-picker)
+[![ci](https://github.com/thednp/color-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/color-picker/actions/workflows/ci.yml)
+[![jsDeliver](https://img.shields.io/jsdelivr/npm/hw/@thednp/color-picker)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
+[![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg)](https://www.npmjs.com/package/@thednp/color-picker)
+[![typescript version](https://img.shields.io/badge/typescript-5.0.3-brightgreen)](https://www.typescriptlang.org/)
+[![eslint version](https://img.shields.io/badge/eslint-8.37.0-brightgreen)](https://github.com/eslint)
+[![prettier version](https://img.shields.io/badge/prettier-2.8.7-brightgreen)](https://prettier.io/)
+[![cypress version](https://img.shields.io/badge/cypress-12.9.0-brightgreen)](https://cypress.io/)
+[![vite version](https://img.shields.io/badge/vite-4.3.9-brightgreen)](https://github.com/vitejs)
 
-[![image](./docs/img/color-picker.png)](http://thednp.github.io/color-picker)
+The feature rich **ColorPicker** component for the modern web sourced with TypeScript, Cypress tested, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply [Color](http://github.com/thednp/color).
 
+**ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
 
-[![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg?style=flat-square)](https://www.npmjs.com/package/@thednp/color-picker)
-[![NPM Downloads](https://img.shields.io/npm/dm/@thednp/color-picker.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@thednp/color-picker)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@thednp/color-picker?style=flat-square)](https://bundlephobia.com/package/@thednp/color-picker)
-[![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/color-picker/badge)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
+[![image](./docs/img/color-picker.png)](http://thednp.github.io/color-picker)
 
-**ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
+## Highlights
 
+- Accessibility Focus for WAI-ARIA compliance
+- ES6+ sources with TypeScript definitions
+- Framework agnostic and flexible design
+- Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
+- Supports keyboard and touch events
+- Automatic repositioning of the popup dropdown on show / window scroll
+- SCSS sources with minimal style required
+- Right To Left Languages Supported
+- light footprint, `10kb` in size when minified and gZipped
 
-# Highlights
-* Accessibility Focus for WAI-ARIA compliance
-* ES6+ sources with TypeScript definitions
-* Framework agnostic and flexible design
-* Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
-* Supports keyboard and touch events
-* Automatic repositioning of the popup dropdown on show / window scroll
-* SCSS sources with minimal style required
-* Right To Left Languages Supported
-* light footprint, `10kb` in size when minified and gZipped
+## Wiki
 
-# Wiki
 For an in depth guide on all things **ColorPicker**, check out the wiki pages:
-* [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
-* [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
-* [CDN Link](https://github.com/thednp/color-picker/wiki/CDN) - quick implementation guide.
-* [Usage](https://github.com/thednp/color-picker/wiki/Usage) - an in-depth browser usage.
-* [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
-* [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
 
-**Note** - the wiki pages are still under construction.
+- [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
+- [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
+- [CDN Link](https://github.com/thednp/color-picker/wiki/CDN) - quick implementation guide.
+- [Usage](https://github.com/thednp/color-picker/wiki/Usage) - an in-depth browser usage.
+- [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
+- [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
+
+## NPM
 
-# NPM
 You can install **ColorPicker** through NPM:
 
 ```
 $ npm install @thednp/color-picker
 ```
 
-# Browser Usage
+## Browser Usage
+
 Download the [latest package](https://github.com/thednp/color-picker/archive/master.zip). unpack and inspect the contents. You need to copy the `color-picker.js` and `color-picker.css` or their minified variations to your app `assets` folders as follows.
 Link the required CSS in your document `<head>` tag
+
 ```html
-<link href="../assets/css/color-picker.css" rel="stylesheet">
+<link href="../assets/css/color-picker.css" rel="stylesheet" />
 ```
 
-Link the required JS in your document  `<body>` tag, though it should work in the `<head>` as well
+Link the required JS in your document `<body>` tag, though it should work in the `<head>` as well
+
 ```html
 <script src="../assets/js/color-picker.js"></script>
 ```
-OR use the `ColorPickerElement` custom element:
-```html
-<script src="../assets/js/color-picker-element.js"></script>
-```
-OR use the `ColorPickerElement` custom element ESM module:
-```html
-<script type="module" src="../assets/js/color-picker-element-esm.js"></script>
-```
 
-If you don't want to use the custom element, you can initialize the function for your elements at the end of your `<body>` tag
+Now you can initialize the function for your elements at the end of your `<body>` tag
+
 ```html
 <script>
-var myPicker = new ColorPicker('input.SELECTOR');
+  var myPicker = new ColorPicker('input.SELECTOR');
 </script>
 ```
 
 To use the DATA-API, you can provide for instance the `data-format="hex"`, and other specific attributes like so:
+
 ```html
 <label for="myPicker">Color Label</label>
 <div class="color-picker">
-  <input id="myPicker" name="myPicker" data-function="color-picker" data-format="hex" data-color-presets="red,green,blue" class="color-preview" value="#069">
+  <input
+    id="myPicker"
+    name="myPicker"
+    data-function="color-picker"
+    data-format="hex"
+    data-color-presets="red,green,blue"
+    class="color-preview"
+    value="#069"
+  />
 </div>
 ```
-The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage#initialize-multiple-targets). 
 
-Alternatively you can use the `ColorPickerElement` custom element, the `data-function="color-picker"` attribute is no longer required:
-```html
-<label for="myPicker">Colour Field Label</label>
-<color-picker data-format="rgb" data-color-keywords="#069:default,#111:revert">
-  <input id="myPicker" name="myPicker" class="color-preview" value="#069">
-</color-picker>
-
-<script type="module" src="../path-to/color-picker-element-esm.js"></script>
-```
-As shown in the above example, all DATA API attributes for instance configuration are to be used on your **custom element**.
+The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage#initialize-multiple-targets).
 
+## Initialize INPUT
 
-# Initialize INPUT
 ```javascript
 import ColorPicker from '@thednp/color-picker';
 
-let myPicker = new ColorPicker('#myPicker');
+const myPicker = new ColorPicker('#myPicker');
 ```
 
-# Initialize Custom Element
-```javascript
-import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';
-
-// initialize the CustomElement
-const myPicker = new ColorPickerElement();
-// set DATA API
-myPicker.setAttribute('data-format', 'hsl');
-myPicker.setAttribute('data-id', 'ADD_YOUR_UNIQUE_ID');
-myPicker.setAttribute('data-value', 'rgb(150 0 150 / 0.8)');
-myPicker.setAttribute('data-label', 'Color Picker Element Label');
-myPicker.setAttribute('data-color-keywords', 'false');
-
-// append, connectedCallback() is triggered
-document.body.append(myPicker);
-```
-Other configuration options apply, see [the API Guide](https://github.com/thednp/color-picker/wiki/API).
+## Thanks
 
+- Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
+- Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
+- Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
+- Jonathan Neal for his [convert-colors](https://github.com/jonathantneal/convert-colors)
+- Peter Dematté for his [colorPicker](http://www.dematte.at/colorPicker/)
+- Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
+- Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
 
-# Thanks
-* Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
-* Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
-* Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
-* Jonathan Neal for his [convert-colors](https://github.com/jonathantneal/convert-colors)
-* Peter Dematté  for his [colorPicker](http://www.dematte.at/colorPicker/)
-* Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
-* Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
+## License
 
-# License
 **ColorPicker** is released under the [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE).