Merge pull request #50 from alabsi91/colorKit-from-class-to-functions

__tests__/colorInformation.test.ts

@@ -0,0 +1,186 @@
+import { describe, expect, test } from '@jest/globals';
+import colorKit from '../src/colorKit/index';
+
+const colorData = [
+  {
+    color: '#c992d2',
+    expected: {
+      format: 'hex6',
+      red: 201,
+      green: 146,
+      blue: 210,
+      alpha: 1,
+      hue: 292,
+      brightness: 82,
+      luminance: 70,
+      luminanceWCAG: 0.3762841918,
+      saturation: 42,
+      isDark: true,
+      isLight: false,
+    },
+  },
+  {
+    color: '#00ff00',
+    expected: {
+      format: 'hex6',
+      red: 0,
+      green: 255,
+      blue: 0,
+      alpha: 1,
+      hue: 120,
+      brightness: 100,
+      luminance: 50,
+      luminanceWCAG: 0.7152,
+      saturation: 100,
+      isDark: false,
+      isLight: true,
+    },
+  },
+  {
+    color: '#0000ff',
+    expected: {
+      format: 'hex6',
+      red: 0,
+      green: 0,
+      blue: 255,
+      alpha: 1,
+      hue: 240,
+      brightness: 100,
+      luminance: 50,
+      luminanceWCAG: 0.0722,
+      saturation: 100,
+      isDark: true,
+      isLight: false,
+    },
+  },
+  {
+    color: 'rgba(39, 98, 186, 0.5)',
+    expected: {
+      format: 'rgba',
+      red: 39,
+      green: 98,
+      blue: 186,
+      alpha: 0.5,
+      hue: 216,
+      brightness: 73,
+      luminance: 44,
+      luminanceWCAG: 0.1271187038,
+      saturation: 65,
+      isDark: true,
+      isLight: false,
+    },
+  },
+  {
+    color: 'hsl(310, 68%, 47%)',
+    expected: {
+      format: 'hsl',
+      red: 201,
+      green: 38,
+      blue: 174,
+      alpha: 1,
+      hue: 310,
+      brightness: 79,
+      luminance: 47,
+      luminanceWCAG: 0.1668271683,
+      saturation: 68,
+      isDark: true,
+      isLight: false,
+    },
+  },
+  {
+    color: 'hwb(182, 49%, 7%)',
+    expected: {
+      format: 'hwb',
+      red: 125,
+      green: 233,
+      blue: 237,
+      alpha: 1,
+      hue: 182,
+      brightness: 93,
+      luminance: 71,
+      luminanceWCAG: 0.6882787144,
+      saturation: 76,
+      isDark: false,
+      isLight: true,
+    },
+  },
+  {
+    color: 'hsv(54, 51%, 76%)',
+    expected: {
+      format: 'hsv',
+      red: 194,
+      green: 184,
+      blue: 95,
+      alpha: 1,
+      hue: 54,
+      brightness: 76,
+      luminance: 57,
+      luminanceWCAG: 0.4701178587,
+      saturation: 45,
+      isDark: true,
+      isLight: false,
+    },
+  },
+  {
+    color: 0xdeb3f5ff,
+    expected: {
+      format: 'hex8',
+      red: 222,
+      green: 179,
+      blue: 245,
+      alpha: 1,
+      hue: 279,
+      brightness: 96,
+      luminance: 83,
+      luminanceWCAG: 0.5436236679,
+      saturation: 77,
+      isDark: false,
+      isLight: true,
+    },
+  },
+];
+
+describe('get the color information', () => {
+  for (const data of colorData) {
+    test(`For the color "${data.color}"`, () => {
+      const type = colorKit.getFormat(data.color);
+      expect(type).toBe(data.expected.format);
+
+      const red = colorKit.getRed(data.color);
+      expect(red).toBe(data.expected.red);
+
+      const green = colorKit.getGreen(data.color);
+      expect(green).toBe(data.expected.green);
+
+      const blue = colorKit.getBlue(data.color);
+      expect(blue).toBe(data.expected.blue);
+
+      const alpha = colorKit.getAlpha(data.color);
+      expect(alpha).toBe(data.expected.alpha);
+
+      const hue = colorKit.getHue(data.color);
+      expect(hue).toBe(data.expected.hue);
+
+      const brightness = colorKit.getBrightness(data.color);
+      expect(brightness).toBe(data.expected.brightness);
+
+      const luminance = colorKit.getLuminance(data.color);
+      expect(luminance).toBe(data.expected.luminance);
+
+      const luminanceWCAG = colorKit.getLuminanceWCAG(data.color);
+      expect(luminanceWCAG).toBeCloseTo(data.expected.luminanceWCAG);
+
+      const saturation = colorKit.getSaturation(data.color);
+      expect(saturation).toBe(data.expected.saturation);
+
+      const isDark = colorKit.isDark(data.color);
+      expect(isDark).toBe(data.expected.isDark);
+
+      const isLight = colorKit.isLight(data.color);
+      expect(isLight).toBe(data.expected.isLight);
+
+      const areColorsEqual = colorKit.areColorsEqual(data.color, data.color);
+      expect(areColorsEqual).toBeTruthy();
+    });
+  }
+});

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+};

docusaurus/docs/ColorKit.mdx

@@ -63,10 +63,7 @@ sidebar_position: 6
 
 #### Color ints
 
-- `0xf0f` (0xrgb)
-- `0xff00ff` (0xrrggbb)
-- `0xf0ff` (0xrgba)
-- `0xff00ff00` (0xrrggbbaa)
+- `0xff00ffff` (0xrrggbbaa)
 
 #### Color keywords
 

jest.config.ts

@@ -0,0 +1,12 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+import type { Config } from 'jest';
+
+const config: Config = {
+  testMatch: ['<rootDir>/__tests__/**/*.test.ts'],
+};
+
+export default config;

package.json

@@ -8,9 +8,10 @@
   "types": "lib/typescript/index.d.ts",
   "scripts": {
     "test": "tsc --noEmit && eslint src --max-warnings=0",
+    "test-colorKit": "jest --silent=false",
     "build": "node scripts/build.js",
     "prettier ": "prettier --ignore-unknown --write src --config-precedence prefer-file",
-    "prepublishOnly": "npm run test && npm run build"
+    "prepublishOnly": "npm run test && npm run test-colorKit && npm run build"
   },
   "keywords": [
     "react-native",
@@ -41,17 +42,22 @@
   "homepage": "https://github.com/alabsi91/reanimated-color-picker",
   "devDependencies": {
     "@babel/cli": "^7.18.6",
-    "@babel/core": "^7.12.9",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@react-native-community/eslint-config": "^3.1.0",
+    "@react-native-community/eslint-config": "3.1.0",
     "@tsconfig/react-native": "^2.0.2",
     "@types/react-native": "^0.71.5",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.0",
+    "jest": "^29.7.0",
     "prettier": "2.8.4",
+    "react-native": "^0.70.14",
     "react-native-reanimated": "^2.8.0",
     "resolve-tspaths": "^0.8.8",
+    "ts-node": "^10.9.1",
     "typescript": "^4.8.4"
   },
   "peerDependencies": {
@@ -65,7 +71,10 @@
     }
   },
   "eslintConfig": {
-    "extends": "@react-native-community",
+    "extends": [
+      "@react-native-community",
+      "plugin:@typescript-eslint/recommended"
+    ],
     "ignorePatterns": [
       "scripts/*",
       "Example/**/*",
@@ -75,6 +84,9 @@
       "docusaurus/**/*"
     ],
     "rules": {
+      "prefer-const": 1,
+      "@typescript-eslint/consistent-type-imports": 1,
+      "@typescript-eslint/no-non-null-assertion": 0,
       "react-native/no-inline-styles": 0,
       "react-native/no-single-element-style-arrays": 1,
       "react-native/no-unused-styles": 1,

src/ColorPicker.tsx

@@ -11,9 +11,10 @@ import type { ColorPickerContext, ColorPickerProps, ColorPickerRef } from '@type
 import type { SupportedColorFormats } from './colorKit/types';
 
 if (isWeb) {
-  // @ts-ignore
+  // @ts-expect-error no global
   if (!global.setImmediate) global.setImmediate = setTimeout;
   try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { enableExperimentalWebImplementation } = require('react-native-gesture-handler');
     enableExperimentalWebImplementation(true);
   } catch (error) {