@thednp/color-picker 1.0.1 → 2.0.0-alpha2

package/package.json

@@ -1,60 +1,54 @@
 {
   "name": "@thednp/color-picker",
-  "version": "1.0.1",
-  "description": "Modern Color Picker Web Component",
-  "main": "dist/js/color-picker.min.js",
-  "module": "dist/js/color-picker.esm.js",
-  "types": "types/index.d.ts",
-  "style": "dist/css/color-picker.min.css",
-  "sass": "src/scss/color-picker.scss",
-  "jsnext": "src/js/color-picker.js",
-  "files": [
-    "types",
-    "dist",
-    "src"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+  "version": "2.0.0-alpha2",
+  "author": "thednp",
+  "license": "MIT",
+  "description": "🎨 Modern Color Picker Component",
+  "homepage": "http://thednp.github.io/color-picker",
+  "source": "./src/ts/index.ts",
+  "main": "./dist/js/color-picker.js",
+  "module": "./dist/js/color-picker.mjs",
+  "types": "./dist/js/color-picker.d.ts",
+  "style": "./dist/css/color-picker.css",
+  "sass": "./src/scss/color-picker.scss",
+  "exports": {
+    ".": {
+      "require": "./dist/color-picker.cjs",
+      "import": "./dist/color-picker.mjs"
+    }
   },
   "scripts": {
-    "test": "cypress run",
-    "cypress": "npx cypress open",
+    "pre-test": "npm run clean-coverage",
+    "test": "npm run pre-test && cypress run",
+    "cypress": "npm run pre-test && npx cypress open",
+    "clean-coverage": "rimraf coverage .nyc_output",
     "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
-    "fix:js": "eslint src/ --config .eslintrc --fix",
-    "lint:js": "eslint src/ --config .eslintrc",
-    "fix:css": "stylelint --config .stylelintrc.json -s --fix scss \"src/scss/*.scss\"",
-    "lint:css": "stylelint --config .stylelintrc.json -s scss \"src/scss/*.scss\"",
-    "bundle": "npm-run-all build compile",
-    "build": "npm run lint:js && npm-run-all --parallel build-* && npm-run-all --parallel copy-js-*",
-    "build:ts": "tsc -d",
-    "build-js": "rollup --environment FORMAT:umd,MIN:false -c",
-    "build-ce": "rollup --environment FORMAT:umd,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.js -c",
-    "build-ce-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.min.js -c",
-    "build-ce-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.js -c",
-    "build-ce-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.min.js -c",
-    "build-cl": "rollup --environment FORMAT:umd,MIN:false,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color.js -c",
-    "build-cl-min": "rollup --environment FORMAT:umd,MIN:true,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color.min.js -c",
-    "build-cl-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color-esm.js -c",
-    "build-cl-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color-esm.min.js -c",
-    "build-cpl": "rollup --environment FORMAT:umd,MIN:false,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette.js -c",
-    "build-cpl-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette.min.js -c",
-    "build-cpl-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette-esm.js -c",
-    "build-cpl-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette-esm.min.js -c",
-    "build-minjs": "rollup --environment FORMAT:umd,MIN:true -c",
-    "build-esm": "rollup --environment FORMAT:esm,MIN:false -c",
-    "build-esmjs": "rollup --environment FORMAT:esm,MIN:true -c",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "fix:ts": "eslint src --config .eslintrc.cjs --fix",
+    "lint:ts": "eslint src --config .eslintrc.cjs",
+    "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
+    "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
+    "build": "npm run lint:ts && npm run build-vite && npm run dts",
+    "build-vite": "vite build && npm run docs",
+    "dev": "vite --open ./docs/index.html --port 8577",
+    "dts": "dts-bundle-generator --config ./dts.config.ts",
+    "docs": "ncp dist/js/color-picker.js docs/js/color-picker.js && ncp dist/js/color-picker.js.map docs/js/color-picker.js.map",
     "copy": "npm-run-all --parallel copy-*",
-    "copy-js-cp": "ncp dist/js/color-picker.js docs/js/color-picker.js",
-    "copy-js-ce": "ncp dist/js/color-picker-element.js docs/js/color-picker-element.js",
     "copy-css-cp": "ncp dist/css/color-picker.css docs/css/color-picker.css",
     "copy-css-rtl": "ncp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
-    "compile": "npm run lint:css && npm-run-all --parallel compile-* && npm-run-all --parallel copy-css-*",
+    "compile": "npm run lint:css && npm-run-all --parallel compile-* && npm run copy",
     "compile-scss": "node compile.js",
     "compile-scss-min": "node compile.js MIN:true",
     "compile-scss-rtl": "node compile.js MIN:false,DIR:rtl",
     "compile-scss-rtl-min": "node compile.js MIN:true,DIR:rtl"
   },
+  "bugs": {
+    "url": "https://github.com/thednp/color-picker/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thednp/color-picker.git"
@@ -66,43 +60,39 @@
     "colorpicker",
     "palette",
     "color-palette",
-    "javascript"
+    "typescript"
   ],
-  "author": "thednp",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/thednp/color-picker/issues"
-  },
-  "homepage": "http://thednp.github.io/color-picker",
   "dependencies": {
-    "@thednp/event-listener": "^1.0.4",
-    "shorter-js": "^0.3.4"
+    "@thednp/color": "^1.0.7",
+    "@thednp/event-listener": "^2.0.1",
+    "@thednp/shorty": "^2.0.0-alpha15"
   },
   "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
-    "@cypress/code-coverage": "^3.9.12",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "cypress": "^9.7.0",
-    "esbuild": "^0.14.30",
-    "eslint": "^7.22.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-vue": "^7.7.0",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@cypress/code-coverage": "^3.10.7",
+    "@types/istanbul-lib-instrument": "^1.7.4",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "cypress": "^12.14.0",
+    "dts-bundle-generator": "^8.0.1",
+    "eslint": "^8.42.0",
+    "eslint-plugin-jsdoc": "^46.2.6",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^4.2.1",
     "istanbul-lib-coverage": "^3.2.0",
-    "istanbul-lib-instrument": "^5.2.0",
+    "istanbul-lib-instrument": "^5.2.1",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "rollup": "^2.71.1",
-    "rollup-plugin-terser": "^5.3.1",
-    "sass": "^1.39.0",
-    "stylelint": "^13.12.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.19.0",
-    "typescript": "^4.5.2"
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.1",
+    "sass": "^1.63.3",
+    "stylelint": "^15.7.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-scss": "^5.0.1",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   }
 }

package/src/scss/_variables.scss

@@ -1,7 +1,6 @@
 $transparency-levels: (
   15, 25, 33, 50, 75, 90
 );
-
 $dropdown-transition: transform .33s ease, opacity .33s ease;
 $btn-transition: box-shadow .33s ease, border .33s ease;
 $options-transition: height .33s ease;

package/src/scss/color-picker.rtl.scss

@@ -7,16 +7,20 @@
     right: auto; left: 0;
     border-radius: .25rem 0 0 .25rem;
   }
+
   .color-dropdown.picker {
     right: 0; left: auto;
   }
+
   .color-dropdown.menu {
     right: auto; left: 0;
   }
+
   .color-control + .color-control {
     margin-right: .5rem;
     margin-left: 0;
   }
+
   .color-options.scrollable {
     margin: 0 0 0 -.5rem;
   }

package/src/scss/color-picker.scss

@@ -1,23 +1,26 @@
 @import "variables";
 
 /* :host */
-color-picker,
 .color-picker {
   position: relative;
   display: flex;
 
   @each $name in "white", "black" {
     @each $lvl in $transparency-levels {
-      @if (type-of($name) == "string" and type-of($lvl) == "number") {
+      @if  type-of($name) == "string" and type-of($lvl) == "number" {
         $color: #fff;
+
         @if $name == "black" {
           $color: #000;
         }
-        $rgba: rgba($color, $lvl * .01);
+
+        $rgba: rgba($color, $lvl * 1%);
+
         --#{$name}-#{$lvl}: #{$rgba};
       }
     }
   }
+
   --dropdown-transition: #{$dropdown-transition};
   --btn-transition: #{$btn-transition};
   --options-transition: #{$options-transition};
@@ -40,7 +43,6 @@ color-picker,
   --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
 
-color-picker:focus,
 .color-picker:focus {
   outline: none;
 }
@@ -62,7 +64,11 @@ color-picker:focus,
 }
 
 .color-dropdown.picker { left: 0; }
-.color-dropdown.menu { right: 0; }
+
+.color-dropdown.menu {
+  right: 0;
+  max-height: 230px;
+}
 
 .open .color-dropdown.top {
   top: auto;
@@ -100,10 +106,12 @@ color-picker:focus,
   border-radius: .25rem;
   outline: none;
   appearance: none;
+
   // transition-duration: .33s;
   // transition-property: box-shadow, border;
   transition: var(--btn-transition);
 }
+
 .btn-appearance:focus,
 .btn-appearance:hover {
   box-shadow: 0 0 0 3px var(--black-15);
@@ -111,26 +119,31 @@ color-picker:focus,
 
 /* color-preview */
 .color-preview {
-  box-shadow: 0 0 0 1px rgba(120,120,120,.33) inset;
+  box-shadow: 0 0 0 1px rgba(120,120,120,33%) inset;
   direction: ltr; /* color value can never be rtl */
 }
 
 .txt-dark .color-preview {
   color: var(--white-75);
 }
+
 .txt-dark .color-preview:focus {
   box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
 }
+
 .txt-dark .color-preview::placeholder {
   color: var(--white-50);
 }
+
 .txt-light .color-preview {
   color: var(--black-75);
 }
+
 .txt-light .color-preview:focus {
   color: var(--black-75);
   box-shadow: 0 0 0 1px #000 inset, 0 0 0 3px var(--black-15);
 }
+
 .txt-light .color-preview::placeholder {
   color: var(--black-50);
 }
@@ -163,20 +176,23 @@ color-picker:focus,
   border: 0;
   border-radius: 0 .25rem .25rem 0;
 }
+
 .txt-light .menu-toggle {
   background: var(--black-50);
+
+  &:focus {
+    background: var(--black-75);
+  }
 }
-.txt-light .menu-toggle:focus,
-.txt-light .menu-toggle:focus {
-  background: var(--black-75);
-}
+
 .txt-dark .menu-toggle {
   background: var(--white-33);
+
+  &:focus {
+    background: var(--white-50);
+  }
 }
-.txt-dark .menu-toggle:focus,
-.txt-dark .menu-toggle:focus {
-  background: var(--white-50);
-}
+
 .menu-toggle svg {
   width: auto;
   height: 100%;
@@ -188,6 +204,7 @@ color-picker:focus,
   overflow-y: auto;
   scrollbar-width: thin;
 }
+
 .scrollable::-webkit-scrollbar {
   width: .5rem;
 }
@@ -214,8 +231,9 @@ color-picker:focus,
 /* color-defaults */
 .color-defaults {
   display: none;
-  flex-wrap: wrap;
-  flex-flow: column;
+
+  // flex-wrap: ;
+  flex-flow: column wrap;
   margin: 0;
   list-style: none;
   padding-inline: 0; // Firefox
@@ -226,9 +244,9 @@ color-picker:focus,
   display: flex;
 }
 
-.color-dropdown.menu {
-  max-height: 230px;
-}
+// .color-dropdown.menu {
+//   max-height: 230px;
+// }
 
 .color-defaults .color-option {
   padding: .25rem .5rem;
@@ -259,6 +277,7 @@ color-picker:focus,
   --grid-gap: .25rem; // grid vertical / horizontal spacing
   --grid-height: auto; // default height
   --grid-hover-height: auto; // height on hover
+
   display: grid;
   padding: 0;
   margin: 0;
@@ -267,25 +286,30 @@ color-picker:focus,
   grid-template-rows: repeat(auto-fill, var(--grid-item-size));
   gap: var(--grid-gap);
 }
+
 .color-options.scrollable {
   height: var(--grid-height);
   margin: 0 -.5rem 0 0; // 0.5rem is the scrollbar width
   overflow-y: scroll;
   transition: var(--options-transition);
 }
+
 .color-options.scrollable:hover {
   height: var(--grid-hover-height);
 }
+
 .color-options + .color-defaults {
   margin-top: .25rem;
 }
+
 .multiline + .color-defaults {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+
   .color-option {
     padding: .25rem .33rem; font-size: 12px;
   }
 }
+
 .color-options .color-option {
   // hide any text
   position: relative;
@@ -293,18 +317,23 @@ color-picker:focus,
   height: var(--grid-item-size);
   overflow: hidden;
   text-indent: 2.1rem;
+
+  &:active, &:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(125,125,125,75%) inset;
+  }
 }
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  outline: none;
-}
+
+// .color-options .color-option:active,
+// .color-options .color-option:focus {
+//   outline: none;
+// }
+
 .color-options .color-option::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
+
 .color-options .color-option:hover::before,
 .color-options .color-option:active::before,
 .color-options .color-option:focus::before {
@@ -313,13 +342,15 @@ color-picker:focus,
   mix-blend-mode: difference;
 }
 
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  box-shadow: 0 0 0 4px rgba(125,125,125,.75) inset;
-}
+// .color-options .color-option {
+//   &:active, &:focus {
+//     outline: none;
+//     box-shadow: 0 0 0 4px rgba(125,125,125,75%) inset;
+//   }
+// }
 
 .color-options .color-option.active {
-  &:after {
+  &::after {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -330,18 +361,19 @@ color-picker:focus,
     border-radius: 4px;
   }
 }
-.txt-dark .color-options .color-option.active:after {
+
+.txt-dark .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--white-90);
 }
-.txt-light .color-options .color-option.active:after {
+
+.txt-light .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--black-90);
 }
 
 /* color-form */
 .color-form {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: center;
   padding: .25rem 0 0;
   font: 12px sans-serif;
@@ -383,6 +415,7 @@ color-picker:focus,
 /* visual control */
 .visual-control {
   height: 150px;
+
   /* important for mobile devices */
   touch-action: none;
   box-shadow: var(--visual-shadow);
@@ -391,18 +424,19 @@ color-picker:focus,
 .visual-control1 {
   width: 150px;
 }
+
 .visual-control2,
 .visual-control3 {
   width: 21px;
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
+@media (width >= 578px) {
   .visual-control { height: 230px; }
   .visual-control1 { width: 230px; }
 }
 
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
   .visual-control { height: 300px; }
   .visual-control1 { width: 300px; }
 }
@@ -428,6 +462,7 @@ color-picker:focus,
   top: 0;
   left: 0;
   height: 7px;
+
   /* important for mobile devices */
   touch-action: none;
   user-select: none;
@@ -437,9 +472,11 @@ color-picker:focus,
   outline: none;
   will-change: transform;
 }
+
 .knob:hover {
   box-shadow: var(--knob-shadow-hover);
 }
+
 .knob:focus,
 .knob:active {
   z-index: 1;
@@ -456,6 +493,7 @@ color-picker:focus,
 .txt-dark .color-pointer {
   box-shadow: 0 0 0 5px var(--white-50);
 }
+
 .txt-light .color-pointer {
   box-shadow: 0 0 0 5px var(--black-50);
 }
@@ -463,6 +501,7 @@ color-picker:focus,
 .txt-dark .color-pointer:hover {
   box-shadow: 0 0 0 5px var(--white-75);
 }
+
 .txt-light .color-pointer:hover {
   box-shadow: 0 0 0 5px var(--black-75);
 }
@@ -471,6 +510,7 @@ color-picker:focus,
 .txt-dark .color-pointer:active {
   box-shadow: 0 0 0 5px var(--white-90);
 }
+
 .txt-light .color-pointer:focus,
 .txt-light .color-pointer:active {
   box-shadow: 0 0 0 5px var(--black-90);

package/src/ts/colorPalette.ts

@@ -0,0 +1,89 @@
+import Color from '@thednp/color';
+// import { isNumber } from '@thednp/shorty';
+
+/**
+ * Returns a color palette with a given set of parameters.
+ *
+ * @example
+ * new ColorPalette(0, 12, 10, 80);
+ * // => { hue: 0, hueSteps: 12, lightSteps: 10, saturation: 80, colors: Array<Color> }
+ */
+export default class ColorPalette {
+  public static Color = Color;
+  hue: number;
+  hueSteps: number;
+  lightSteps: number;
+  saturation: number;
+  colors: Color[];
+  /**
+   * The `hue` parameter is optional, which would be set to 0.
+   * * `args.hue` the starting Hue [0, 360]
+   * * `args.hueSteps` Hue Steps Count [5, 24]
+   * * `args.lightSteps` Lightness Steps Count [5, 12]
+   * * `args.saturation` Saturation [0, 100]
+   */
+  constructor(...args: [number?, number?, number?, number?]) {
+    let hue = 0;
+    let hueSteps = 12;
+    let lightSteps = 10;
+    let lightnessArray = [0.5];
+    let saturation = 100;
+    // if (!args.every(n => isNumber(n))) throw TypeError('ColorPalette only accepts numbers.');
+
+    if (args.length === 4) {
+      [hue, hueSteps, lightSteps, saturation] = args as [number, number, number, number];
+    } else if (args.length === 3) {
+      [hue, hueSteps, lightSteps] = args as [number, number, number];
+    } else if (args.length === 2) {
+      [hueSteps, lightSteps] = args as [number, number];
+      if ([hueSteps, lightSteps].some(n => n < 1)) {
+        throw TypeError('ColorPalette: the two minimum arguments must be numbers higher than 0.');
+      }
+    }
+
+    const colors: Color[] = [];
+    const hueStep = 360 / hueSteps;
+    const half = Color.roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
+    const steps1To13 = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075];
+    const lightSets = [
+      [1, 2, 3],
+      [4, 5],
+      [6, 7],
+      [8, 9],
+      [10, 11],
+      [12, 13],
+    ];
+    const closestSet = lightSets.find(set => set.includes(lightSteps));
+
+    // find a lightStep that won't go beyond black and white
+    // something within the [10-90] range of lightness
+    const lightStep = closestSet
+      ? steps1To13[lightSets.indexOf(closestSet)]
+      : 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
+
+    // light tints
+    for (let i = 1; i < half + 1; i += 1) {
+      lightnessArray = [...lightnessArray, 0.5 + lightStep * i];
+    }
+
+    // dark tints
+    for (let i = 1; i < lightSteps - half; i += 1) {
+      lightnessArray = [0.5 - lightStep * i, ...lightnessArray];
+    }
+
+    // feed `colors` Array
+    for (let i = 0; i < hueSteps; i += 1) {
+      const currentHue = ((hue + i * hueStep) % 360) / 360;
+      lightnessArray.forEach(l => {
+        const newColor = new Color({ h: currentHue, s: 1, l });
+        colors.push(saturation < 100 ? newColor.saturate(saturation - 100) : newColor);
+      });
+    }
+
+    this.hue = hue;
+    this.hueSteps = hueSteps;
+    this.lightSteps = lightSteps;
+    this.saturation = saturation;
+    this.colors = colors;
+  }
+}