back to inline styles

Author: Harry Fox

.eslintignore

@@ -1,6 +1,35 @@
-/*.log
-/*.DS_Store
-/node_modules/
-/lib/
-/dist/
-/.idea/
+# OS
+.DS_Store
+
+# Cache
+.cache
+.playwright
+.tmp
+*.tsbuildinfo
+.eslintcache
+
+# Yarn
+.pnp.*
+**/.yarn/*
+!**/.yarn/patches
+!**/.yarn/plugins
+!**/.yarn/releases
+!**/.yarn/sdks
+!**/.yarn/versions
+
+# Project-generated directories and files
+coverage
+dist
+node_modules
+playwright-report
+test-results
+package.tgz
+
+# Logs
+npm-debug.log
+yarn-error.log
+
+# .env files
+**/.env
+**/.env.*
+!**/.env.example

.eslintrc.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "files": {
+    "ignore": [
+      ".tsimp",
+      ".yarn",
+      "coverage",
+      "dist",
+      ".pnp.cjs",
+      ".pnp.loader.mjs"
+    ]
+  },
+  "formatter": {
+    "lineWidth": 100,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "rules": {
+      "complexity": {
+        "noUselessSwitchCase": "off"
+      },
+      "suspicious": {
+        "noConsoleLog": "warn"
+      }
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2,
+      "lineWidth": 100,
+      "quoteStyle": "single"
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "overrides": [
+    {
+      "include": ["**/package.json"],
+      "formatter": {
+        "lineWidth": 1
+      }
+    },
+    {
+      "include": ["**/vite.config.ts"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noConsoleLog": "off"
+          }
+        }
+      }
+    }
+  ]
+}

.gitignore

@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "description": "An easy to use color/gradient picker for React.js",
   "type": "module",
   "sideEffects": [
@@ -15,7 +15,7 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
-    "./dist/Picker.css": "./dist/Picker.css"
+    "./dist/Calendar.css": "./dist/Picker.css"
   },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
@@ -24,19 +24,15 @@
     "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false",
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
-    "copy-styles": "cpy 'src/**/*.css' dist/esm && cpy 'src/**/*.css' dist/cjs",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "copy-styles": "cpy 'src/**/*.css' dist",
+    "format": "biome format",
+    "lint": "biome lint",
     "prepack": "yarn clean && yarn build",
-    "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
+    "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
     "unit": "vitest",
-    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
+    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & node --eval \"fs.watch('src', () => child_process.exec('yarn copy-styles'))\""
   },
-  "files": [
-    "dist",
-    "src"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hxf31891/react-gradient-color-picker.git"
@@ -68,8 +64,6 @@
     "@types/reactcss": "^1.2.11",
     "@types/tinycolor2": "^1.4.6",
     "cpy-cli": "^3.1.1",
-    "eslint": "8.22.0",
-    "eslint-config-wojtekmaj": "^0.9.0",
     "happy-dom": "^12.6.0",
     "nodemon": "^3.0.0",
     "prettier": "^3.0.0",
@@ -80,15 +74,19 @@
     "vitest": "^1.0.2"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
     }
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/hxf31891/react-gradient-color-picker/issues"
@@ -97,4 +95,4 @@
   "publishConfig": {
     "@hxf31891:registry": "https://npm.pkg.github.com"
   }
-}
+}

biome.json

@@ -21,7 +21,7 @@ const AdvBar = ({
   openAdvanced: boolean
   label: string
 }) => {
-  const { squareWidth, classes } = usePicker()
+  const { squareWidth, defaultStyles } = usePicker()
   const [dragging, setDragging] = useState<boolean>(false)
   const [handleTop, setHandleTop] = useState<number>(2)
   const left = value * (squareWidth - 18)
@@ -66,11 +66,10 @@ const AdvBar = ({
     <div style={{ width: '100%', padding: '3px 0px 3px 0px' }}>
       <div
         onMouseMove={(e) => handleMove(e)}
-        className={`${classes.cResize} ${classes.psRl}`}
+        style={{ cursor: 'resize', position: 'relative' }}
       >
         <div
-          style={{ left, top: handleTop }}
-          className={classes.rbgcpHandle}
+          style={{ left, top: handleTop, ...defaultStyles.rbgcpHandle }}
           onMouseDown={handleDown}
           role="button"
           tabIndex={0}
@@ -91,6 +90,11 @@ const AdvBar = ({
           }}
           onMouseMove={(e) => handleMove(e)}
           onClick={(e) => handleClick(e)}
+          tabIndex={0}
+          role="button"
+          onKeyDown={() => {
+            return
+          }}
         >
           {label}
         </div>

package.json

@@ -6,7 +6,7 @@ const ComparibleColors = ({
 }: {
   openComparibles: boolean
 }) => {
-  const { tinyColor, handleChange, classes } = usePicker()
+  const { tinyColor, handleChange, defaultStyles } = usePicker()
 
   const analogous = tinyColor.analogous()
   const monochromatic = tinyColor.monochromatic()
@@ -41,8 +41,8 @@ const ComparibleColors = ({
             position: 'absolute',
             top: 6.5,
             left: 2,
+            ...defaultStyles.rbgcpComparibleLabel,
           }}
-          className={classes.rbgcpComparibleLabel}
         >
           Color Guide
         </div>
@@ -52,8 +52,8 @@ const ComparibleColors = ({
             fontSize: 12,
             fontWeight: 500,
             marginTop: 3,
+            ...defaultStyles.rbgcpComparibleLabel,
           }}
-          className={classes.rbgcpComparibleLabel}
         >
           Analogous
         </div>
@@ -72,8 +72,8 @@ const ComparibleColors = ({
             fontSize: 12,
             fontWeight: 500,
             marginTop: 3,
+            ...defaultStyles.rbgcpComparibleLabel,
           }}
-          className={classes.rbgcpComparibleLabel}
         >
           Monochromatic
         </div>
@@ -99,8 +99,8 @@ const ComparibleColors = ({
             fontSize: 12,
             fontWeight: 500,
             marginTop: 3,
+            ...defaultStyles.rbgcpComparibleLabel,
           }}
-          className={classes.rbgcpComparibleLabel}
         >
           Triad
         </div>
@@ -130,8 +130,8 @@ const ComparibleColors = ({
             fontSize: 12,
             fontWeight: 500,
             marginTop: 3,
+            ...defaultStyles.rbgcpComparibleLabel,
           }}
-          className={classes.rbgcpComparibleLabel}
         >
           Tetrad
         </div>