First commit

README.md

@@ -1,36 +1,41 @@
-# stub-repo · [![Test workflow status](https://github.com/ChrisCodesThings/stub-repo/actions/workflows/test.yml/badge.svg)](../../actions/workflows/test.yml) [![NPM Version](https://img.shields.io/npm/v/@chriscodesthings/stub-repo)](https://www.npmjs.com/package/@chriscodesthings/stub-repo) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+# css-hex-color-to-rgba · [![Test workflow status](https://github.com/ChrisCodesThings/css-hex-color-to-rgba/actions/workflows/test.yml/badge.svg)](../../actions/workflows/test.yml) [![NPM Version](https://img.shields.io/npm/v/@chriscodesthings/css-hex-color-to-rgba)](https://www.npmjs.com/package/@chriscodesthings/css-hex-color-to-rgba) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-> **Function to determine if something is a string type**
+> **Converts a CSS hex color code to RGBA values**
 
 ## Install
 
 ```sh
-npm install --save @chriscodesthings/stub-repo
+npm install --save @chriscodesthings/css-hex-color-to-rgba
 ```
 
 ## Use
 
 ```js
-import stubRepo from '@chriscodesthings/stub-repo';
+import hexColorToRGBA from '@chriscodesthings/css-hex-color-to-rgba';
 
-console.log(stubRepo("hello world!"));
-// => true
+console.log(hexColorToRGBA("#6495ed"));
+// => [ 100, 149, 237 ]
 ```
 
 ## Syntax
 
 ```js
-stubRepo(var);
+hexColorToRGBA(col);
 ```
 
 ### Parameters
 
-- *var*: any
+- *col*: a CSS hex color code
 
 ### Return Value
 
-Returns something probably.
+Array containing the R, G, B and A values of *col*.
 
 ## Description
 
-Does what it says on the tin.
+Converts a CSS hex color to RGBA values. 
+
+- R, G, and B range from 0 to 255 
+- A ranges from 0 to 1
+
+Accepts CSS hex color codes in any form.

index.js

@@ -1,2 +1,2 @@
-export { default } from "./src/stubRepo.js";
+export { default } from "./src/cssHexColorToRGB.js";
 

package.json

@@ -1,15 +1,17 @@
 {
-  "name": "@chriscodesthings/stub-repo",
+  "name": "@chriscodesthings/css-hex-color-to-rgba",
   "version": "0.1.0",
-  "description": "npm package template",
+  "description": "Converts a CSS hex color code to RGBA values",
   "keywords": [
-    "stub",
-    "package",
-    "template"
+    "css",
+    "hex",
+    "color",
+    "rgb",
+    "rgba"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ChrisCodesThings/stub-repo.git"
+    "url": "git+https://github.com/ChrisCodesThings/css-hex-color-to-rgba.git"
   },
   "main": "index.js",
   "type": "module",
@@ -23,14 +25,17 @@
     "node": ">=18.0.0"
   },
   "bugs": {
-    "url": "https://github.com/ChrisCodesThings/stub-repo/issues"
+    "url": "https://github.com/ChrisCodesThings/css-hex-color-to-rgba/issues"
   },
   "scripts": {
     "test": "NODE_OPTIONS='--experimental-vm-modules' jest",
     "version": "auto-changelog -p && git add CHANGELOG.md",
     "postversion": "git push && git push --tags"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@chriscodesthings/is-css-hex-color": "*",
+    "@chriscodesthings/expand-css-hex-color": "*"
+  },
   "devDependencies": {
     "auto-changelog": "*",
     "jest": "*"

src/cssHexColorToRGB.js

@@ -0,0 +1,17 @@
+import isCSSHexColor from "@chriscodesthings/is-css-hex-color";
+import expandCSSHexColor from "@chriscodesthings/expand-css-hex-color";
+
+function hexToDec(h) {
+    return parseInt(h, 16);
+}
+
+export default function (col) {
+    if (!isCSSHexColor(col)) {
+        return;
+    }
+
+    const hex = (expandCSSHexColor(col) + "ff").slice(1, 9);
+    const [r, g, b, a] = [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6), hex.slice(6, 8)];
+
+    return [hexToDec(r), hexToDec(g), hexToDec(b), Math.round((hexToDec(a) / 255) * 100) / 100];
+}

tests/index.test.js

@@ -1,8 +1,38 @@
 
 const { default: testFunc } = await import("../");
 
-describe("testing my module", () => {
-    test("expect function to return true", async () => {
-        expect(testFunc()).toEqual(true);
+describe("check for bad input", () => {
+    test("nothing", async () => {
+        expect(testFunc()).toBeUndefined();
+    });
+
+    test("boolean", async () => {
+        expect(testFunc(true)).toBeUndefined();
+    });
+
+    test("a number", async () => {
+        expect(testFunc(123)).toBeUndefined();
+    });
+
+    test("not a css colour string", async () => {
+        expect(testFunc("foo")).toBeUndefined();
+    });
+});
+
+describe("convert some colours", () => {
+    test("black", () => {
+        expect(testFunc("#000000")).toEqual([0, 0, 0, 1]);
+    });
+
+    test("black shorthand", () => {
+        expect(testFunc("#000")).toEqual([0, 0, 0, 1]);
+    });
+
+    test("cornflowerblue", () => {
+        expect(testFunc("#6495ed")).toEqual([100, 149, 237, 1]);
+    });
+
+    test("cornflowerblue with 50% transparency", () => {
+        expect(testFunc("#6495ed7f")).toEqual([100, 149, 237, 0.5]);
     });
 });