@thednp/color-picker 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/color-picker",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "author": "thednp",
   "license": "MIT",
   "description": "🎨 Modern Color Picker Component",
@@ -18,19 +18,19 @@
       "import": "./dist/js/color-picker.mjs",
       "types": "./dist/js/color-picker.d.ts"
     },
-    "./dist/css/color-picker.css": {
+    "./color-picker.css": {
       "import": "./dist/css/color-picker.css",
       "require": "./dist/css/color-picker.css"
     },
-    "./dist/css/color-picker.rtl.css": {
+    "./color-picker.rtl.css": {
       "import": "./dist/css/color-picker.rtl.css",
       "require": "./dist/css/color-picker.rtl.css"
     },
-    "./src/scss/color-picker.scss": {
+    "./color-picker.scss": {
       "import": "./src/scss/color-picker.scss",
       "require": "./src/scss/color-picker.scss"
     },
-    "./src/scss/color-picker.rtl.scss": {
+    "./color-picker.rtl.scss": {
       "import": "./src/scss/color-picker.rtl.scss",
       "require": "./src/scss/color-picker.rtl.scss"
     }
@@ -56,62 +56,51 @@
     "typescript"
   ],
   "dependencies": {
-    "@thednp/color": "^1.0.9",
-    "@thednp/shorty": "2.0.3"
+    "@thednp/color": "^1.0.13",
+    "@thednp/shorty": "^2.0.9"
   },
   "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.2",
-    "@cypress/code-coverage": "^3.12.44",
-    "@types/istanbul-lib-instrument": "^1.7.7",
-    "@types/node": "^22.2.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "cypress": "^13.13.2",
-    "dts-bundle-generator": "^9.5.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^46.10.1",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^5.2.1",
-    "istanbul-lib-coverage": "^3.2.2",
-    "istanbul-lib-instrument": "^6.0.3",
-    "ncp": "^2.0.0",
-    "nyc": "^15.1.0",
-    "prettier": "^3.3.3",
-    "sass": "^1.77.8",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^11.1.0",
+    "@types/node": "^22.9.3",
+    "@vitest/browser": "^2.1.5",
+    "@vitest/coverage-istanbul": "^2.1.5",
+    "@vitest/ui": "^2.1.5",
+    "playwright": "^1.49.0",
+    "sass": "^1.81.0",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^5.3.2",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "stylelint-scss": "^6.10.0",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-strip-comments": "^0.0.3",
+    "vitest": "^2.1.5"
   },
   "scripts": {
     "pre-test": "pnpm clean-coverage",
-    "test": "pnpm pre-test && cypress run",
-    "cypress": "pnpm pre-test && npx cypress open",
-    "badges": "npx -p dependency-version-badge update-badge typescript cypress eslint prettier vite",
+    "test": "pnpm pre-test && vitest --config vitest.config.mts",
+    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.mts --browser=chrome",
+    "badges": "npx -p dependency-version-badge update-badge typescript vitest vite",
     "clean-coverage": "rm -rf coverage && rm -rf .nyc_output",
-    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
-    "format": "prettier --write \"src/**/*.ts\"",
+    "format": "deno fmt src/ts",
     "lint": "pnpm lint:ts && pnpm check:ts && pnpm lint:css",
-    "fix:ts": "eslint src --config .eslintrc.cjs --fix",
-    "lint:ts": "eslint src --config .eslintrc.cjs",
+    "fix:ts": "deno lint src/ts --fix",
+    "lint:ts": "deno lint src/ts",
     "check:ts": "tsc --noEmit",
     "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
     "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
-    "build": "pnpm lint && pnpm build-vite && pnpm dts && pnpm docs",
-    "build-vite": "vite build",
+    "build": "vite build",
     "dev": "vite --open ./docs/dev.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": "pnpm copy-css-cp && pnpm copy-css-rtl",
-    "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": "pnpm lint:css && pnpm compile-scss && pnpm compile-scss-min && pnpm compile-scss-rtl && pnpm compile-scss-rtl-min && pnpm copy",
-    "compile-scss": "node compile.cjs",
-    "compile-scss-min": "node compile.cjs MIN:true",
-    "compile-scss-rtl": "node compile.cjs MIN:false,DIR:rtl",
-    "compile-scss-rtl-min": "node compile.cjs MIN:true,DIR:rtl"
+    "copy": "pnpm run --parallel /^copy-/",
+    "copy-js": "cp dist/js/color-picker.js docs/js/color-picker.js",
+    "copy-js-map": "cp dist/js/color-picker.js.map docs/js/color-picker.js.map",
+    "copy-css": "cp dist/css/color-picker.css docs/css/color-picker.css",
+    "copy-css-rtl": "cp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
+    "compile": "pnpm lint:css && pnpm run --parallel /^compile-/",
+    "compile-scss": "pnpm sass src/scss/color-picker.scss dist/css/color-picker.css --pkg-importer=node --style=expanded --load-path=src/scss",
+    "compile-scss-min": "pnpm sass src/scss/color-picker.scss dist/css/color-picker.min.css --pkg-importer=node --style=compressed --load-path=src/scss",
+    "compile-scss-rtl": "pnpm sass src/scss/color-picker.rtl.scss dist/css/color-picker.rtl.css --pkg-importer=node --style=expanded --load-path=src/scss",
+    "compile-scss-rtl-min": "pnpm sass src/scss/color-picker.rtl.scss dist/css/color-picker.rtl.min.css --pkg-importer=node --style=compressed --load-path=src/scss"
   }
 }

package/.eslintrc.cjs

@@ -1,199 +0,0 @@
-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

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

package/.prettierrc.json

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,236 +0,0 @@
-{
-  "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/compile.cjs

@@ -1,51 +0,0 @@
-// ColorPicker | Compile SCSS Script
-// Build script to compile and minify the CSS file from SCSS folder
-// Usage: npm run compile-scss
-
-const {writeFileSync} = require("fs");
-// const writeFileSync = fs.writeFileSync;
-// import { writeFileSync } from "fs";
-const sass = require("sass");
-const pkg = require("./package.json");
-const year = new Date().getFullYear();
-const args = {};
-const pkName = pkg.name.includes(pkg.author) ? pkg.name.replace('@','') : `${pkg.author}/${pkg.name}`;
-const home = `https://github.com/${pkName}`;
-
-const ARGS = process.argv.slice(-1)[0].split(",");
-ARGS.map((x) => {
-  const [name, value] = x.split(":");
-  args[name] = value;
-});
-
-const RTL = args.DIR === "rtl" ? "RTL " : "";
-const banner =
-  args.MIN === "true"
-    ? `/* ColorPicker ${RTL}v${pkg.version} | ${pkg.author} © ${year} | ${pkg.license}-License */`
-    : `/*!
-* ColorPicker v${pkg.version} (${pkg.homepage})
-* Copyright ${year} © ${pkg.author}
-* Licensed under MIT (${home}/blob/main/LICENSE)
-*/`;
-
-const DIR = args.DIR === "rtl" ? ".rtl" : "";
-const MIN = args.MIN === "true" ? ".min" : "";
-const INPUTFILE = args.INPUTFILE
-  ? args.INPUTFILE
-  : `./src/scss/color-picker${DIR}.scss`;
-const OUTPUTFILE = args.OUTPUTFILE
-  ? args.OUTPUTFILE
-  : `./dist/css/color-picker${DIR}${MIN}.css`;
-const COMPRESS = args.MIN === "true" ? "compressed" : "expanded";
-
-// Helper Functions
-function compile(inputPath, writePath, compressType) {
-  const result = sass.compile(inputPath, {
-    style: compressType,
-    loadPaths: ["src/scss"],
-  });
-  writeFileSync(writePath, `${banner}\n` + result.css.toString());
-  console.log(`✅ Compiled ${inputPath} to ${writePath}.`);
-}
-
-compile(INPUTFILE, OUTPUTFILE, COMPRESS);