From c742bff554722182553658c6eb18caed1e85ddeb Mon Sep 17 00:00:00 2001 From: Nathan Simpson Date: Wed, 18 Oct 2023 16:36:10 +1100 Subject: [PATCH] WIP --- .prettierrc | 1 + index.js | 26 ++++++++++++++++++++++---- index.test.js | 38 ++++++++++++++++---------------------- readme.md | 24 +++++++++--------------- 4 files changed, 48 insertions(+), 41 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/index.js b/index.js index 4e823d3..d2034f8 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,34 @@ const { hexToRGB, formatRGB, formatRGBA } = require("./utils"); /** + * hexAlpha allows you to set an opacity value to a HEX color. It returns a string in the format of RGBA. * @param {string} input - A color in hexadecimal syntax. e.g. #fa6d01 * @param {number} alpha - The desired opacity, from 0 to 1. * @returns {string} - The new color in rgba() or rgb() syntax. */ const hexAlpha = (input, alpha) => { - const newColor = hexToRGB(input); + // ensure input is a valid hex color + if (typeof input !== "string" || !/^#([0-9A-Fa-f]{3}){1,2}$/.test(input)) { + throw new Error( + "Invalid input: input must be a valid hexadecimal color code. e.g. #fa6d01." + ); + } - return typeof alpha === "number" && alpha >= 0 && alpha <= 1 - ? formatRGBA(newColor, alpha) - : formatRGB(newColor); + // convert hex string to rgb map + const rgb = hexToRGB(input); + + // if alpha is not provided, return rgb string + if (alpha === undefined) return formatRGB(rgb); + + // ensure alpha is a valid number between 0 and 1 + if (typeof alpha !== "number" || alpha < 0 || alpha > 1) { + throw new Error( + "Invalid alpha value: alpha must be a number between 0 and 1." + ); + } + + // return rgba string + return formatRGBA(rgb, alpha); }; module.exports = hexAlpha; diff --git a/index.test.js b/index.test.js index 695d6e6..27b1c5f 100644 --- a/index.test.js +++ b/index.test.js @@ -1,33 +1,27 @@ const hexAlpha = require("./index"); -test("#FFFFFF converts to rgb(255,255,255)", () => { - expect(hexAlpha("#ffffff")).toBe("rgb(255,255,255)"); -}); - -test("#000000 converts to rgba(0,0,0,1)", () => { +test("hexAlpha returns an RGBA value for a colour with an opacity", () => { expect(hexAlpha("#000000", 1)).toBe("rgba(0,0,0,1)"); -}); - -test("#fa6d01 converts to rgb(250,109,1)", () => { - expect(hexAlpha("#fa6d01")).toBe("rgb(250,109,1)"); -}); - -test("#f00 converts to rgba(0,0,0,1)", () => { expect(hexAlpha("#f00", 0.1)).toBe("rgba(255,0,0,0.1)"); + expect(hexAlpha("#fa6d01", 0)).toBe("rgba(250,109,1,0)"); + expect(hexAlpha("#fa6d01", 0.5)).toBe("rgba(250,109,1,0.5)"); }); -test("HEX color and alpha converts to RGBA", () => { - expect(hexAlpha("#fa6d01", 0.1)).toBe("rgba(250,109,1,0.1)"); +test("hexAlpha returns an RGB value for a colour without an opacity", () => { + expect(hexAlpha("#ffffff")).toBe("rgb(255,255,255)"); + expect(hexAlpha("#fa6d01")).toBe("rgb(250,109,1)"); }); -test("HEX color with 0 or 1 alpha converts to RGBA", () => { - expect(hexAlpha("#fa6d01", 0)).toBe("rgba(250,109,1,0)"); - expect(hexAlpha("#fa6d01", 1)).toBe("rgba(250,109,1,1)"); +test("hexAlpha throws an error for a colour with an invalid opacity", () => { + expect(hexAlpha("#fa6d01", "")).toThrowError(); + expect(hexAlpha("#fa6d01", false)).toThrowError(); + expect(hexAlpha("#fa6d01", -1)).toThrowError(); + expect(hexAlpha("#fa6d01", 2.4)).toThrowError(); }); -test("HEX color with invalid `alpha` converts to RGB", () => { - expect(hexAlpha("#fa6d01", "")).toBe("rgb(250,109,1)"); - expect(hexAlpha("#fa6d01", false)).toBe("rgb(250,109,1)"); - expect(hexAlpha("#fa6d01", -1)).toBe("rgb(250,109,1)"); - expect(hexAlpha("#fa6d01", 2.4)).toBe("rgb(250,109,1)"); +test("hexAlpha throws an error for an invalid colour", () => { + expect(hexAlpha("invalid")).toThrowError(); + expect(hexAlpha("#ffgg00")).toThrowError(); + expect(hexAlpha("#ff000")).toThrowError(); + expect(hexAlpha("#ff00000")).toThrowError(); }); diff --git a/readme.md b/readme.md index 5591f86..68e1f9c 100644 --- a/readme.md +++ b/readme.md @@ -1,20 +1,6 @@ # HEX-ALPHA -A really simple package that enables you to specify an opacity for your HEX colours. - -``` -HEX + Alpha = RGBA -``` - -## Installation - -``` -npm install hex-alpha -// or -yarn add hex-alpha -``` - -## Examples +A simple function which allows you to set an opacity value to a HEX color. It returns a string in the format of RGBA. ```javascript import hexAlpha from "hex-alpha"; @@ -29,6 +15,14 @@ hexAlpha("#f00"); // returns "rgb(255,0,0)" ``` +## Installation + +``` +npm install hex-alpha +// or +yarn add hex-alpha +``` + ## Meetup talk I gave a talk about making HEX-Alpha at the Sydney Javascript meetup - SydJS. [Check it out here](https://www.youtube.com/watch?v=OQbF8Mx4iso).