@livelink/swatchster 1.0.1

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "nuxt.isNuxtApp": false
+}

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at jamie@thelucid.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [https://contributor-covenant.org/version/1/4][version]
+
+[homepage]: https://contributor-covenant.org
+[version]: https://contributor-covenant.org/version/1/4/

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Livelink Technology Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# swatchster
+
+A versatile colour swatch package that extracts colour hex codes from designs.
+
+## Installation
+
+```shell
+yarn add @livelink/swatchster
+```

package/index.js

@@ -0,0 +1,9 @@
+import { swatchFromHex } from "./src/swatch-from-hex";
+import { swatchFromRgb } from "./src/swatch-from-rgb";
+import { swatchFromCanvas } from "./src/swatch-from-canvas";
+
+export {
+  swatchFromCanvas as default,
+  swatchFromHex,
+  swatchFromRgb
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@livelink/swatchster",
+  "version": "1.0.1",
+  "description": "A versatile colour swatch package that extracts colour hex codes from designs.",
+  "main": "index.js",
+  "repository": "https://github.com/livelink/swatchster",
+  "author": "Emma Bovill <e.bovill@livelinktechonology.net>",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --verbose"
+  },
+  "dependencies": {
+    "canvas": "^2.11.2",
+    "jest": "^29.7.0"
+  },
+  "devDependencies": {
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^22.1.0"
+  }
+}

package/src/helpers/colour-distance.js

@@ -0,0 +1,15 @@
+
+export const colourDistance = (hexColor1, hexColor2) => {
+  const r1 = parseInt(hexColor1.slice(1, 3), 16);
+  const g1 = parseInt(hexColor1.slice(3, 5), 16);
+  const b1 = parseInt(hexColor1.slice(5, 7), 16);
+  const r2 = parseInt(hexColor2.slice(1, 3), 16);
+  const g2 = parseInt(hexColor2.slice(3, 5), 16);
+  const b2 = parseInt(hexColor2.slice(5, 7), 16);
+
+  const dr = r1 - r2;
+  const dg = g1 - g2;
+  const db = b1 - b2;
+
+  return Math.sqrt(dr * dr + dg * dg + db * db);
+}

package/src/helpers/hex-to-rgb.js

@@ -0,0 +1,9 @@
+// source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+export const hexToRgb = (hex) => {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+   ] : null;
+}

package/src/helpers/rgb-to-hex.js

@@ -0,0 +1,9 @@
+// source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+const componentToHex = (c) => {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+export const rgbToHex = (r, g, b) => {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}

package/src/swatch-from-canvas.js

@@ -0,0 +1,38 @@
+import { rgbToHex } from "./helpers/rgb-to-hex";
+import { colourDistance } from "./helpers/colour-distance";
+
+const swatchFromCanvas = (canvas, tolerance = 32) => {
+  const context = canvas.getContext('2d');
+  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+  const pixelData = imageData.data;
+  const standoutColours = new Map();
+
+  for (let i = 0; i < pixelData.length; i += 4) {
+    const r = pixelData[i];
+    const g = pixelData[i + 1];
+    const b = pixelData[i + 2];
+    const a = pixelData[i + 3];
+
+    // Check if the pixel is not transparent
+    if (a > 0) {
+      const hexColour = rgbToHex(r, g, b);
+      
+      // Check if this colour is not too similar to existing standout colours
+      let isStandout = true;
+      for (const [existingColour, _] of standoutColours.entries()) {
+        if (colourDistance(hexColour, existingColour) < tolerance) {
+          isStandout = false;
+          break;
+        }
+      }
+
+      if (isStandout) {
+        standoutColours.set(hexColour, true);
+      }
+    }
+  }
+
+  return Array.from(standoutColours.keys());
+}
+
+export { swatchFromCanvas };

package/src/swatch-from-hex.js

@@ -0,0 +1,6 @@
+import { hexToRgb } from "./helpers/hex-to-rgb"
+import { swatchFromRgb } from "./swatch-from-rgb"
+
+export const swatchFromHex = (hex) => {
+  return swatchFromRgb(...hexToRgb(hex));
+}

package/src/swatch-from-rgb.js

@@ -0,0 +1,24 @@
+import { rgbToHex } from "./helpers/rgb-to-hex";
+
+const SHADES = 10
+
+export const swatchFromRgb = (red, green, blue) => {
+  const shade = rgbToHex(red, green, blue);
+
+  const redDiff = 255 - red;
+  const greenDiff = 255 - green;
+  const blueDiff =  255 - blue;
+
+  const redStepValue = redDiff / SHADES
+  const greenStepValue = greenDiff / SHADES
+  const blueStepValue = blueDiff / SHADES
+
+  const shade1 = [red - redStepValue * 2, green - greenStepValue * 2, blue - blueStepValue * 2];
+  const shade2 = [red - redStepValue, green - greenStepValue, blue - blueStepValue];
+  const shade3 = [red + redStepValue, green + greenStepValue, blue + blueStepValue];
+  const shade4 = [red + redStepValue * 2, green + greenStepValue * 2, blue + blueStepValue * 2];
+
+  const swatch = [rgbToHex(...shade1), rgbToHex(...shade2), shade, rgbToHex(...shade3), rgbToHex(...shade4)];
+
+  return swatch;
+}

package/tests/defaults/swatch-from-canvas.test.js

@@ -0,0 +1,54 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Import necessary functions and modules
+import { swatchFromCanvas } from '../../src/swatch-from-canvas';
+
+test('use jsdom in this test file', () => {
+  const element = document.createElement('div');
+  expect(element).not.toBeNull();
+});
+
+// Mock canvas and context for testing
+const canvas_1 = document.createElement('canvas');
+const ctx = canvas_1.getContext('2d');
+
+// Sample canvas pixel data (replace with your own test data)
+const imageData = ctx.createImageData(2, 2);
+imageData.data.set([
+  255, 0, 0, 255, // Red
+  0, 255, 0, 255, // Green
+  0, 0, 255, 255, // Blue
+  255, 255, 0, 255, // Yellow
+]);
+
+// Set the canvas width and height
+canvas_1.width = 2;
+canvas_1.height = 2;
+
+// Mock getImageData method
+ctx.getImageData = () => imageData;
+
+describe('swatchFromCanvas', () => {
+  it('should return standout colors from the canvas', () => {
+    const standoutColors = swatchFromCanvas(canvas_1);
+    
+    // The expected result based on the sample data
+    const expectedColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
+    
+    // Assert that the function returns the expected standout colors
+    expect(standoutColors).toEqual(expectedColors);
+  });
+
+  it('should return standout colors with custom tolerance', () => {
+    const standoutColors = swatchFromCanvas(canvas_1, 50);
+    
+    // In this case, the colors are all standout due to higher tolerance
+    const expectedColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
+    
+    expect(standoutColors).toEqual(expectedColors);
+  });
+
+  // Add more test cases as needed
+});