Merge pull request #327 from simonwep/#326

Update build system and support new rgb syntax

.eslintrc

@@ -1,18 +1,17 @@
 {
-    "parser": "babel-eslint",
     "extends": [
-        "eslint:recommended",
-        "simon"
+        "eslint:recommended"
     ],
     "env": {
         "browser": true
     },
     "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2022,
         "sourceType": "module"
     },
     "rules": {
-        "new-cap": "off"
+        "new-cap": "off",
+        "no-cond-assign": "off"
     },
     "globals": {
         "VERSION": true

.github/workflows/ci.yml

@@ -6,12 +6,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18
 
       - name: Install
         run: npm ci

README.md

@@ -49,26 +49,6 @@
 
 <br>
 
--------------
-
-<h4 align="center">
-  <b>Get 700+ Material components for the latest Bootstrap 5 for free.</b>
-</h4>
-<p align="center">
-  This component is also available as ready-to-use solution in <a href="https://mdbootstrap.com/docs/standard/?utm_ref_id=304654" target="_blank"><b>MDB UI Kit</b></a>. Learn more about <a href="https://mdbootstrap.com/docs/standard/plugins/color-picker/?utm_ref_id=304654" target="_blank"><b>Bootstrap Color Picker here</b></a>.
-<p>
-
-<p align="center">
-  <a href="https://mdbootstrap.com/docs/standard/?utm_ref_id=304654" target="_blank">
-      <img src="https://mdbootstrap.com//img/Others/mdb5-free.png" height="250"/>
-  </a>
-  <a href="https://mdbootstrap.com/docs/standard/plugins/color-picker/?utm_ref_id=304654" target="_blank">
-      <img src="https://mdbootstrap.com//img/Others/color-picker.png" height="250">
-  </a>
-</p>
-
-----------------
-
 ### Features
 * Themes
 * Simple usage
@@ -90,10 +70,7 @@ The reason behind this decision is the way this tool has been build (monolithic,
 
 > Personally I recommend building these UI-Related "widgets" directly into the app with the framework you're using which takes more time but in return gives you full power of how it should work and look like. Frameworks such as [(p)react](https://preactjs.com/), [vue](https://vuejs.org/) and [svelte](https://svelte.dev/) will make it a breeze to develop such things within a day.
 
-##### Update
-
-This project will be archived at the end of 2021!
-After this there will be no more bug / security fixes or feature requests.
+**As of 2021, this project is no longer maintained!**
 
 ### Themes
 |Classic|Monolith|Nano|

package.json

@@ -6,6 +6,7 @@
     "description": "Flat, Simple, Hackable Color-Picker.",
     "keywords": [
         "ux",
+        "pickr",
         "color",
         "color-picker"
     ],
@@ -14,33 +15,9 @@
     "scripts": {
         "build": "node ./scripts/build.js",
         "dev": "webpack serve --mode development",
-        "lint": "eslint ./src",
-        "lint:fix": "eslint ./src --fix",
-        "dryrun": "npm run lint:fix && npm run build"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.14.6",
-        "@babel/plugin-proposal-class-properties": "^7.14.5",
-        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-        "@babel/plugin-transform-parameters": "^7.14.5",
-        "@babel/preset-env": "^7.14.7",
-        "autoprefixer": "^10.2.6",
-        "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.2.2",
-        "css-loader": "^5.2.6",
-        "eslint": "^7.29.0",
-        "eslint-config-simon": "^2.1.0",
-        "eslint-loader": "^4.0.2",
-        "mini-css-extract-plugin": "^1.6.1",
-        "node-sass": "^6.0.1",
-        "postcss-loader": "^6.1.0",
-        "sass-loader": "^12.1.0",
-        "terser-webpack-plugin": "^5.1.4",
-        "webpack": "^5.40.0",
-        "webpack-cleanup-plugin": "^0.5.1",
-        "webpack-cli": "^4.7.2",
-        "webpack-dev-server": "^4.0.0-beta.3",
-        "webpack-fix-style-only-entries": "^0.6.1"
+        "lint": "eslint ./src/**/*.js",
+        "lint:fix": "npm run lint -- --fix",
+        "test:ci": "npm run lint:fix && npm run build"
     },
     "homepage": "https://github.com/Simonwep/pickr#readme",
     "repository": {
@@ -50,8 +27,27 @@
     "bugs": {
         "url": "https://github.com/Simonwep/pickr/issues"
     },
+    "devDependencies": {
+        "@babel/core": "7.23.0",
+        "@babel/preset-env": "7.22.20",
+        "autoprefixer": "10.4.16",
+        "babel-loader": "9.1.3",
+        "css-loader": "6.8.1",
+        "eslint": "8.50.0",
+        "eslint-webpack-plugin": "4.0.1",
+        "mini-css-extract-plugin": "2.7.6",
+        "node-sass": "9.0.0",
+        "postcss-loader": "7.3.3",
+        "sass": "1.68.0",
+        "sass-loader": "13.3.2",
+        "terser-webpack-plugin": "5.3.9",
+        "webpack": "5.88.2",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "4.15.1",
+        "webpack-remove-empty-scripts": "1.0.4"
+    },
     "dependencies": {
-        "core-js": "^3.15.1",
-        "nanopop": "^2.1.0"
+        "core-js": "3.32.2",
+        "nanopop": "2.3.0"
     }
 }

scripts/build.js

@@ -1,4 +1,4 @@
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const {version} = require('../package');
@@ -11,6 +11,7 @@ const path = require('path');
     const banner = new webpack.BannerPlugin(`Pickr ${version} MIT | https://github.com/Simonwep/pickr`);
 
     // CSS
+    console.log('Bundle themes');
     await webpack({
         mode: 'production',
         entry: {
@@ -48,7 +49,7 @@ const path = require('path');
 
         plugins: [
             banner,
-            new FixStyleOnlyEntriesPlugin(),
+            new RemoveEmptyScriptsPlugin(),
             new MiniCssExtractPlugin({
                 filename: '[name].min.css'
             })
@@ -59,7 +60,7 @@ const path = require('path');
     // writing a minified CSS file; both processes having handles on the files can
     // result in strange suffixes that fail to parse due to an extra `ap*/`
     for (const {filename, babelConfig} of bundles) {
-        console.log(`Create ${filename}`);
+        console.log(`Bundle ${filename}`);
 
         await webpack({
             mode: 'production',
@@ -111,6 +112,4 @@ const path = require('path');
             }
         });
     }
-
-    console.log('Done');
 })();

scripts/bundles.js

@@ -3,11 +3,6 @@ module.exports = [
         'filename': 'pickr.es5.min.js',
         'babelConfig': {
             'babelrc': false,
-            'plugins': [
-                '@babel/plugin-proposal-object-rest-spread',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-transform-parameters'
-            ],
             'presets': [
                 [
                     '@babel/preset-env',
@@ -25,9 +20,6 @@ module.exports = [
         'filename': 'pickr.min.js',
         'babelConfig': {
             'babelrc': false,
-            'plugins': [
-                '@babel/plugin-proposal-class-properties'
-            ],
             'presets': [
                 [
                     '@babel/preset-env',

src/js/utils/color.js

@@ -226,10 +226,10 @@ export function parseToHSVA(str) {
 
     // Regular expressions to match different types of color represention
     const regex = {
-        cmyk: /^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,
-        rgba: /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,
-        hsla: /^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,
-        hsva: /^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,
+        cmyk: /^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,
+        rgba: /^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,
+        hsla: /^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,
+        hsva: /^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,
         hexa: /^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i
     };
 
@@ -249,9 +249,6 @@ export function parseToHSVA(str) {
             continue;
         }
 
-        // Match[2] does only contain a truly value if rgba, hsla, or hsla got matched
-        const alphaValid = a => (!!match[2] === (typeof a === 'number'));
-
         // Try to convert
         switch (type) {
             case 'cmyk': {
@@ -264,9 +261,14 @@ export function parseToHSVA(str) {
                 return {values: cmykToHsv(c, m, y, k), type};
             }
             case 'rgba': {
-                const [, , , r, g, b, a] = numarize(match);
+                let [, r, , g, , b, , , a] = numarize(match);
+
+                r = match[2] === '%' ? (r / 100) * 255 : r;
+                g = match[4] === '%' ? (g / 100) * 255 : g;
+                b = match[6] === '%' ? (b / 100) * 255 : b;
+                a = match[9] === '%' ? (a / 100) : a;
 
-                if (r > 255 || g > 255 || b > 255 || a < 0 || a > 1 || !alphaValid(a)) {
+                if (r > 255 || g > 255 || b > 255 || a < 0 || a > 1) {
                     break invalid;
                 }
 
@@ -288,18 +290,20 @@ export function parseToHSVA(str) {
                 return {values: [...hexToHsv(raw), a], a, type};
             }
             case 'hsla': {
-                const [, , , h, s, l, a] = numarize(match);
+                let [, h, s, l, , a] = numarize(match);
+                a = match[6] === '%' ? (a / 100) : a;
 
-                if (h > 360 || s > 100 || l > 100 || a < 0 || a > 1 || !alphaValid(a)) {
+                if (h > 360 || s > 100 || l > 100 || a < 0 || a > 1) {
                     break invalid;
                 }
 
                 return {values: [...hslToHsv(h, s, l), a], a, type};
             }
             case 'hsva': {
-                const [, , , h, s, v, a] = numarize(match);
+                let [, h, s, v, , a] = numarize(match);
+                a = match[6] === '%' ? (a / 100) : a;
 
-                if (h > 360 || s > 100 || v > 100 || a < 0 || a > 1 || !alphaValid(a)) {
+                if (h > 360 || s > 100 || v > 100 || a < 0 || a > 1) {
                     break invalid;
                 }
 

webpack.config.js

@@ -1,4 +1,5 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const {version} = require('./package.json');
 const webpack = require('webpack');
 
@@ -28,10 +29,6 @@ module.exports = {
 
     module: {
         rules: [
-            {
-                test: /\.js$/,
-                use: 'babel-loader'
-            },
             {
                 test: /\.scss$/,
                 use: [
@@ -44,6 +41,7 @@ module.exports = {
     },
 
     plugins: [
+        new ESLintPlugin(),
         new MiniCssExtractPlugin({
             filename: '[name].css'
         }),