Merge 6c89fe5 into efd983f

packages/hextorgb/README.md

@@ -0,0 +1,11 @@
+# `@artifak/hextorgb`
+
+A utility function to convert hexadecimal colour values to RGB or RGBA string.
+
+## Usage
+
+```
+const hextorgb = require('@artifak/hextorgb');
+
+// TODO: DEMONSTRATE API
+```

packages/hextorgb/__tests__/hextorgb.test.ts

@@ -0,0 +1,100 @@
+import {
+  hexToRGBA,
+  hexToRGB,
+  splitHexToRGB,
+  formatHexValue,
+  expandShorthandHex,
+  isValidHex
+} from '../src/hextorgb';
+
+describe('@artifak/hextorgb', () => {
+  describe('isValidHex', () => {
+    it('returns TRUE with full length hexadecimal color string value', () => {
+      expect(isValidHex('#FAFDFC')).toEqual(true);
+      expect(isValidHex('#fdfdfd')).toEqual(true);
+    });
+
+    it('returns TRUE with shorthand hexadecimal color string value', () => {
+      expect(isValidHex('#FAF')).toEqual(true);
+      expect(isValidHex('#ddd')).toEqual(true);
+    });
+
+    it('returns FALSE with false-like values', () => {
+      expect(isValidHex(void 0 as any)).toEqual(false);
+      expect(isValidHex(false as any)).toEqual(false);
+      expect(isValidHex(null as any)).toEqual(false);
+    });
+
+    it('returns FALSE with non-hexadecimal string value', () => {
+      expect(isValidHex('#ff#fff')).toEqual(false);
+      expect(isValidHex('#ff')).toEqual(false);
+      expect(isValidHex('#Hello World')).toEqual(false);
+      expect(isValidHex('Hello World')).toEqual(false);
+    });
+  });
+
+  describe('expandShorthandHex', () => {
+    it('expands shorthand hexadecimal colour value to full', () => {
+      expect(expandShorthandHex('#FFF')).toBe('FFFFFF');
+      expect(expandShorthandHex('#fff')).toBe('ffffff');
+    });
+
+    it('returns the same string non-hexadecimal value', () => {
+      expect(expandShorthandHex('Hello World')).toBe('Hello World');
+    });
+  });
+
+  describe('splitHexToRGB', () => {
+    it('returns split hex values', () => {
+      expect(splitHexToRGB('DF3EA1')!.toString()).toEqual(
+        ['DF3EA1', 'DF', '3E', 'A1'].toString()
+      );
+    });
+
+    it('returns NULL when provided non-hexadecimal colour value string', () => {
+      expect(splitHexToRGB('Lorem Ipsum Dolor Sit Amet')).toEqual(null);
+    });
+  });
+
+  describe('formatHexValue', () => {
+    it('returns UNDEFINED when provided non-hexadecimal colour value string', () => {
+      expect(formatHexValue('Lorem Ipsum Dolor Sit Amet')).toEqual(void 0);
+    });
+
+    it('returns an array of split hexadecimal color values when provided a hexadecimal colour value string', () => {
+      expect(formatHexValue('#DF3EA1')?.toString()).toEqual(
+        ['#DF3EA1', 'DF', '3E', 'A1'].toString()
+      );
+    });
+  });
+
+  describe('hexToRGB', () => {
+    it('returns an object with RGB values', () => {
+      expect(hexToRGB('#DF3EA1')).toMatchObject({
+        r: 223,
+        g: 62,
+        b: 161
+      });
+    });
+
+    it('returns UNDEFINED with invalid hex string values', () => {
+      expect(hexToRGB('Hello World')).toEqual(void 0);
+    });
+  });
+
+  describe('hexToRGBA', () => {
+    it('returns a string RGBA value with valid hex and alpha values', () => {
+      expect(hexToRGBA('#DF3EA1', 0.5)).toEqual('rgba(223, 62, 161, 0.5)');
+      expect(hexToRGBA('#df3ea1', 0.5)).toEqual('rgba(223, 62, 161, 0.5)');
+    });
+
+    it('returns a string RGBA value with valid hex and default alpha values', () => {
+      expect(hexToRGBA('#DF3EA1')).toEqual('rgba(223, 62, 161, 1)');
+      expect(hexToRGBA('#df3ea1')).toEqual('rgba(223, 62, 161, 1)');
+    });
+
+    it('returns UNDEFINED with invalid non-hexadecimal color string value', () => {
+      expect(hexToRGBA('Lorem Ipsum Dolor Sit Amet', 0.5)).toEqual(void 0);
+    });
+  });
+});

packages/hextorgb/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@artifak/hextorgb",
+  "version": "1.0.0",
+  "description": "Utility function to convert style hex colour codes to RGB or RGBA strings.",
+  "keywords": [],
+  "author": "Julian Low",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "dist/hextorgb.cjs.js",
+  "module": "dist/hextorgb.esm.js",
+  "src": "src/index.ts",
+  "directories": {
+    "lib": "src",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heyjul3s/artifak.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/heyjul3s/artifak/issues"
+  },
+  "homepage": "https://github.com/heyjul3s/artifak#readme"
+}

packages/hextorgb/src/hextorgb.ts

@@ -0,0 +1,50 @@
+import { RGBColor } from './typings';
+
+export function hexToRGBA(hex: string, alpha = 1): string | void {
+  const color = hexToRGB(hex);
+
+  if (!!color) {
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+  }
+}
+
+export function hexToRGB(hex: string): RGBColor | void {
+  const hexValue = formatHexValue(hex);
+
+  if (!!hexValue) {
+    return {
+      r: parseInt(hexValue[1], 16),
+      g: parseInt(hexValue[2], 16),
+      b: parseInt(hexValue[3], 16)
+    };
+  }
+}
+
+export function formatHexValue(
+  hex: string
+): RegExpExecArray | null | undefined {
+  if (!isValidHex(hex)) {
+    return void 0;
+  }
+
+  const normalizedHexValue = expandShorthandHex(hex);
+  return splitHexToRGB(normalizedHexValue);
+}
+
+export function splitHexToRGB(hex: string): RegExpExecArray | null {
+  const HEX_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+  return HEX_REGEX.exec(hex);
+}
+
+export function expandShorthandHex(hex: string): string {
+  const SHORTHAND_REGEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  return hex.replace(
+    SHORTHAND_REGEX,
+    (match, r, g, b) => r + r + g + g + b + b
+  );
+}
+
+export function isValidHex(hex: string): boolean {
+  const HEX_REGEX = /^#?([a-f\d]){3,6}$/i;
+  return HEX_REGEX.test(hex);
+}

packages/hextorgb/src/index.ts

@@ -0,0 +1,2 @@
+export { hexToRGB, hexToRGBA } from './hextorgb';
+export { RGBColor } from './typings';

packages/hextorgb/src/typings.ts

@@ -0,0 +1,5 @@
+export type RGBColor = {
+  r: number;
+  g: number;
+  b: number;
+};