diff --git a/.gitignore b/.gitignore index 2086fe5..ec04b96 100755 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ logs npm-debug.log* yarn-debug.log* yarn-error.log* - # IDEs and editors /.idea/ .vscode/ @@ -34,4 +33,3 @@ dist .yarn/build-state.yml .yarn/install-state.gz ./.yarn/install-state.gz -./.yarn/cache \ No newline at end of file diff --git a/package.json b/package.json index 0c37cc5..58f5b5a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@devlander/colors", "description": "Color utility package used between packages", - "version": "0.0.6", + "version": "0.0.7", "browser": "dist/umd/index.js", "main": "dist/cjs/index.js", "types": "typings/index.d.ts", @@ -88,7 +88,8 @@ "rollup-plugin-polyfill-node": "^0.13.0", "rollup-plugin-terser": "^7.0.2", "tslib": "^2.6.2", - "typedoc": "^0.25.8" + "typedoc": "^0.25.8", + "typescript": "5.3.x" }, "dependencies": { "@devlander/utils": "^0.0.66" diff --git a/src/__tests__/colorTestCases.test.ts b/src/__tests__/colorTestCases.test.ts index 5a54294..8240853 100644 --- a/src/__tests__/colorTestCases.test.ts +++ b/src/__tests__/colorTestCases.test.ts @@ -6,34 +6,93 @@ export type ColorOutputType = "HexDecimalObject" | "Error" | "boolean"; export const colorTestResults = { passed: { hex: [ - "#F7F7F7", "#D32F2F", "#FFFFFF", "#FF5722", "#007BFF", "#6C757D", - "#E57373", "#81C784", "#64B5F6", "#FFD54F", "#BA68C8", "#66AFFF", - "#FAFAFA", "#E0E0E0", "#757575", "#FFC107", "#FFECB3", "#F2F2F2", - "#F5F5F5", "#D5D5D5", "#43A047", "#A8A8A8", "#F5F5F5", "#D9D9D9", - "#34FFFF", "#EBFFFF", "#D6FFFF", "#C2FFFF", "#AEFFFF", "#9AFFFF", - "#85FFFF", "#71FFFF", "#48FFFF", "#343333", "#EBEBEB", "#D6D6D6", - "#C2C2C2", "#AEADAD", "#9A9999", "#858585", "#717070", "#484747", - "#FFFFFF", "#262626", "#0055AA", "#333333", "#E57373", "#FFA000" + "#F7F7F7", + "#D32F2F", + "#FFFFFF", + "#FF5722", + "#007BFF", + "#6C757D", + "#E57373", + "#81C784", + "#64B5F6", + "#FFD54F", + "#BA68C8", + "#66AFFF", + "#FAFAFA", + "#E0E0E0", + "#757575", + "#FFC107", + "#FFECB3", + "#F2F2F2", + "#F5F5F5", + "#D5D5D5", + "#43A047", + "#A8A8A8", + "#F5F5F5", + "#D9D9D9", + "#34FFFF", + "#EBFFFF", + "#D6FFFF", + "#C2FFFF", + "#AEFFFF", + "#9AFFFF", + "#85FFFF", + "#71FFFF", + "#48FFFF", + "#343333", + "#EBEBEB", + "#D6D6D6", + "#C2C2C2", + "#AEADAD", + "#9A9999", + "#858585", + "#717070", + "#484747", + "#FFFFFF", + "#262626", + "#0055AA", + "#333333", + "#E57373", + "#FFA000", ], - rgb: [] + rgb: [], }, failed: { rgb: [ - "rgb(247, 247, 247)", "rgb(211, 47, 47)", "rgb(255, 255, 255)", - "rgb(255, 87, 34)", "rgb(0, 123, 255)", "rgb(108, 117, 125)", - "rgb(229, 115, 115)", "rgb(129, 199, 132)", "rgb(100, 181, 246)", - "rgb(255, 213, 79)", "rgb(186, 104, 200)", "rgb(102, 175, 255)", - "rgb(250, 250, 250)", "rgb(33, 33, 33)", "rgb(224, 224, 224)", - "rgb(117, 117, 117)", "rgb(189, 189, 189)", "rgb(51, 51, 51)", - "rgb(213, 213, 213)", "rgb(245, 245, 245)", "rgb(72, 71, 71)", - "rgb(113, 112, 112)" + "rgb(247, 247, 247)", + "rgb(211, 47, 47)", + "rgb(255, 255, 255)", + "rgb(255, 87, 34)", + "rgb(0, 123, 255)", + "rgb(108, 117, 125)", + "rgb(229, 115, 115)", + "rgb(129, 199, 132)", + "rgb(100, 181, 246)", + "rgb(255, 213, 79)", + "rgb(186, 104, 200)", + "rgb(102, 175, 255)", + "rgb(250, 250, 250)", + "rgb(33, 33, 33)", + "rgb(224, 224, 224)", + "rgb(117, 117, 117)", + "rgb(189, 189, 189)", + "rgb(51, 51, 51)", + "rgb(213, 213, 213)", + "rgb(245, 245, 245)", + "rgb(72, 71, 71)", + "rgb(113, 112, 112)", ], rgba: [ - "rgba(0, 0, 0, 0.15)", "rgba(255, 193, 7, 0.5)", "rgba(255, 193, 7, 0.8)", - "rgba(255, 165, 0, 0.22)", "rgba(255, 165, 0, 0.62)", "rgba(229, 115, 115, 0.1)", - "rgba(229, 115, 115, 0.4)", "rgba(0, 0, 0, 0.15)" - ] - } + "rgba(0, 0, 0, 0.15)", + "rgba(255, 193, 7, 0.5)", + "rgba(255, 193, 7, 0.8)", + "rgba(255, 165, 0, 0.22)", + "rgba(255, 165, 0, 0.62)", + "rgba(229, 115, 115, 0.1)", + "rgba(229, 115, 115, 0.4)", + "rgba(0, 0, 0, 0.15)", + ], + }, }; export interface ColorTestCase { name: string; @@ -79,7 +138,6 @@ const validRgbStrings = [ "rgb(0,0,0)", "rgb(255, 255, 255)", ...colorTestResults.failed.rgb, - ]; // Valid RGBA strings test cases @@ -90,16 +148,8 @@ const validRgbaStrings = [ "rgba(0,0,0,0.5)", "rgba(255, 255, 255, 0.5)", ...colorTestResults.failed.rgba, - ]; - - - - - - - // Generate RGB test cases const generateRgbTestCases = (): ColorTestCase[] => { const cases: ColorTestCase[] = [ @@ -363,5 +413,3 @@ export const colorTestCases: ColorTestCase[] = [ ...generateRgbTestCases(), ...generateRgbaTestCases(), ]; - - diff --git a/src/adjustColor.ts b/src/adjustColor.ts index 1996ff6..a39e05d 100644 --- a/src/adjustColor.ts +++ b/src/adjustColor.ts @@ -1,20 +1,20 @@ -import { applyAlphaToColor } from './applyAlphaToColor' -import { canBeConvertedIntoColor } from './canBeConvertedToColor' +import { applyAlphaToColor } from "./applyAlphaToColor"; +import { canBeConvertedIntoColor } from "./canBeConvertedToColor"; -import { lightenColor } from './lightenColor' -import { darkenColor } from './darkenColor' -import { toHexColor } from './toHexColor' -import { toRgbString } from './toRgbString' -import { blendColors } from './blendColors' -import { parseRgbString } from './parseRgbString' -import { isValidHex } from './isValidHex' -import { isValidRgb } from './isValidRgb' -import { isValidRgba } from './isValidRgba' -import { ThemeType } from './types/theme.type' -import { HexDecimalObject } from './types/hex-decimal-object.interface' -import { hexesToDecimals, RgbWithAHexObject } from './hexToDecimals' -import { parseHex } from './parseHex' -import { AlphaScale } from './types/alpha-scale.type' +import { lightenColor } from "./lightenColor"; +import { darkenColor } from "./darkenColor"; +import { toHexColor } from "./toHexColor"; +import { toRgbString } from "./toRgbString"; +import { blendColors } from "./blendColors"; +import { parseRgbString } from "./parseRgbString"; +import { isValidHex } from "./isValidHex"; +import { isValidRgb } from "./isValidRgb"; +import { isValidRgba } from "./isValidRgba"; +import { ThemeType } from "./types/theme.type"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +import { hexesToDecimals, RgbWithAHexObject } from "./hexToDecimals"; +import { parseHex } from "./parseHex"; +import { AlphaScale } from "./types/alpha-scale.type"; export interface AdjustColorFunc { ( @@ -22,16 +22,16 @@ export interface AdjustColorFunc { alphaValue: AlphaScale, mode: ThemeType, cssColorNames?: string[], - ): string + ): string; } -const defaultCssColorNames = ['transparent'] +const defaultCssColorNames = ["transparent"]; export const logFromPackage = (message: string): void => { - if (typeof console !== 'undefined' && typeof console.log === 'function') { - console.log(message) + if (typeof console !== "undefined" && typeof console.log === "function") { + console.log(message); } -} +}; export const adjustColor: AdjustColorFunc = ( colorValue: string, @@ -40,68 +40,68 @@ export const adjustColor: AdjustColorFunc = ( cssColorNames = defaultCssColorNames, ): string => { try { - if (cssColorNames.includes(colorValue)) return colorValue + if (cssColorNames.includes(colorValue)) return colorValue; if (alphaValue < 0 || alphaValue > 100) { logFromPackage( - 'Alpha value should be between 0.0 and 1.0. Returning default color.', - ) - return '#FF0000' // Default color (Red in this case) + "Alpha value should be between 0.0 and 1.0. Returning default color.", + ); + return "#FF0000"; // Default color (Red in this case) } if (canBeConvertedIntoColor(colorValue)) { - let color: HexDecimalObject | null = null + let color: HexDecimalObject | null = null; if (isValidHex(colorValue)) { - const hexObject = parseHex(colorValue) - color = hexesToDecimals(hexObject as RgbWithAHexObject) + const hexObject = parseHex(colorValue); + color = hexesToDecimals(hexObject as RgbWithAHexObject); } else if (isValidRgb(colorValue)) { - color = parseRgbString(colorValue) + color = parseRgbString(colorValue); } else if (isValidRgba(colorValue)) { - color = parseRgbString(colorValue) + color = parseRgbString(colorValue); } else { - throw new Error('Invalid color format') + throw new Error("Invalid color format"); } if (!color) { - throw new Error('Failed to parse color') + throw new Error("Failed to parse color"); } - const brightnessFactor = mode === 'light' ? 0.2 : -0.2 + const brightnessFactor = mode === "light" ? 0.2 : -0.2; color = - mode === 'light' + mode === "light" ? lightenColor(color, brightnessFactor) - : darkenColor(color, brightnessFactor) + : darkenColor(color, brightnessFactor); - const alphaScale = alphaValue + const alphaScale = alphaValue; if (isValidHex(colorValue)) { const mixedColor = blendColors( color, { r: 255, g: 255, b: 255 }, alphaScale, - ) - return toHexColor(mixedColor) + ); + return toHexColor(mixedColor); } else { - const colorWithAlpha = applyAlphaToColor(color, alphaScale) - return toRgbString(colorWithAlpha) + const colorWithAlpha = applyAlphaToColor(color, alphaScale); + return toRgbString(colorWithAlpha); } } else { logFromPackage( `Failed to convert ${colorValue} into a color. Returning default color.`, - ) - return '#FF0000' // Default color (Red in this case) + ); + return "#FF0000"; // Default color (Red in this case) } } catch (error) { if (error instanceof Error) { logFromPackage( `Error adjusting color with value: ${colorValue}. Returning default color. Error: ${error.message}`, - ) + ); } else { logFromPackage( `Error adjusting color with value: ${colorValue}. Returning default color. Unknown error.`, - ) + ); } - return '#FF0000' // Default color (Red in this case) + return "#FF0000"; // Default color (Red in this case) } -} +}; diff --git a/typings/__tests__/colorTestCases.test.d.ts b/typings/__tests__/colorTestCases.test.d.ts index 2685efc..4df78b8 100644 --- a/typings/__tests__/colorTestCases.test.d.ts +++ b/typings/__tests__/colorTestCases.test.d.ts @@ -1,6 +1,16 @@ import { HexDecimalObject } from "../types/rgb.type"; export type ColorInputType = "hex" | "rgb" | "rgba" | "invalid"; export type ColorOutputType = "HexDecimalObject" | "Error" | "boolean"; +export declare const colorTestResults: { + passed: { + hex: string[]; + rgb: never[]; + }; + failed: { + rgb: string[]; + rgba: string[]; + }; +}; export interface ColorTestCase { name: string; input: string; diff --git a/typings/adjustColor.d.ts b/typings/adjustColor.d.ts index 4dacca6..204294f 100644 --- a/typings/adjustColor.d.ts +++ b/typings/adjustColor.d.ts @@ -3,5 +3,5 @@ import { AlphaScale } from "./types/alpha-scale.type"; export interface AdjustColorFunc { (colorValue: string, alphaValue: AlphaScale, mode: ThemeType, cssColorNames?: string[]): string; } -export declare const log: (message: string) => void; +export declare const logFromPackage: (message: string) => void; export declare const adjustColor: AdjustColorFunc; diff --git a/yarn.lock b/yarn.lock index d32a52b..072cf88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1609,6 +1609,7 @@ __metadata: rollup-plugin-terser: ^7.0.2 tslib: ^2.6.2 typedoc: ^0.25.8 + typescript: 5.3.x languageName: unknown linkType: soft @@ -7563,6 +7564,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:5.3.x": + version: 5.3.3 + resolution: "typescript@npm:5.3.3" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 2007ccb6e51bbbf6fde0a78099efe04dc1c3dfbdff04ca3b6a8bc717991862b39fd6126c0c3ebf2d2d98ac5e960bcaa873826bb2bb241f14277034148f41f6a2 + languageName: node + linkType: hard + "typescript@npm:^5.2.2": version: 5.5.3 resolution: "typescript@npm:5.5.3" @@ -7573,6 +7584,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@5.3.x#~builtin": + version: 5.3.3 + resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin::version=5.3.3&hash=f3b441" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: f61375590b3162599f0f0d5b8737877ac0a7bc52761dbb585d67e7b8753a3a4c42d9a554c4cc929f591ffcf3a2b0602f65ae3ce74714fd5652623a816862b610 + languageName: node + linkType: hard + "typescript@patch:typescript@^5.2.2#~builtin": version: 5.5.3 resolution: "typescript@patch:typescript@npm%3A5.5.3#~builtin::version=5.5.3&hash=f3b441"