@thednp/color-picker 2.0.1 → 2.0.2

package/{cypress → test}/fixtures/getMarkup.js

@@ -1,10 +1,12 @@
 import testSample from "./testSample";
 import getRandomInt from "./getRandomInt";
 
-export default function getMarkup(body, id, format) {
+export default function getMarkup(id, format) {
   const set = testSample[getRandomInt(0,3)];
   const value = set[format];
 
+  const container = document.createElement('div');
+
   const label = document.createElement('label');
   label.setAttribute('for', `color-picker-${id}`);
   label.innerText = `Color Picker Test`;
@@ -25,11 +27,10 @@ export default function getMarkup(body, id, format) {
   a.setAttribute('href', '#');
   a.innerText = 'Some link';
   a.className = 'my-link';
-  a.style = 'position: absolute; top: 20px; opacity: 0.015';
-  // body.append(a);
+  a.style = 'position: absolute; top: 0px; right:0; opacity: 0.015';
+
   cpWrapper.append(input);
-  if (body) {
-    body.append(label, cpWrapper, a);
-  }
-  return {set, value};
+  container.append(label, cpWrapper, a);
+
+  return { container, set, value};
 }

package/test/fixtures/swipe.ts

@@ -0,0 +1,33 @@
+/**
+ * Triggers a number of pointer events for a given target and
+ * an array of coordinates.
+ * @param target the element to dispatch the pointer event(s)
+ * @param points an array of [clientX, clientY] coordinates
+ * @param offset an optional offset object of { x, y } coordinates
+ */
+const swipe = <T extends HTMLElement = HTMLElement>(target: T, points: [number, number][], offset?: { x: number, y: number }) => {
+    const rect = target.getBoundingClientRect();
+    const offsetX = Number.isInteger(offset?.x) ? offset!.x : rect.left;
+    const offsetY = Number.isInteger(offset?.y) ? offset!.y : rect.top;
+    if (points.length === 1) points.push([0,0]);
+
+    points.forEach(([x,y], i) => {
+        // first is a pointerdown, last is a pointerup and all pointermove in between
+        const ev = i === 0 ? 'pointerdown' : i === points.length - 1 ? 'pointerup' : 'pointermove';
+        const point = new PointerEvent(ev, {
+            clientX: x + offsetX, clientY: y + offsetY,
+            pressure: 1,
+            bubbles: true, // Whether the event should bubble up the DOM
+            cancelable: true, // Whether the event can be canceled
+            pointerId: 0, // The ID of the pointer (e.g., a touch point)
+            pointerType: "touch", // The type of pointer (e.g., touch or mouse)
+            width: 1, // The width of the pointer (in pixels)
+            height: 1, // The height of the pointer (in pixels)
+            isPrimary: true, // Whether this is the primary pointer (true) or not (false)
+        });
+        target.dispatchEvent(point);
+        target.offsetWidth;
+    });
+};
+
+export default swipe;

package/test/fixtures/write.ts

@@ -0,0 +1,37 @@
+/**
+ * A simple utility to type text into input elements.
+ * It will split the string provided and replace spaces with Space keyboard key
+ * and will trigger a dispatch for each keyboard key found in the string.
+ * @param target A button, input element or editable element
+ * @param value the text to type
+ *
+ * @example
+ * write(target, "hsl 150 0 0")
+ * write(target, "hslSpace150Space0Space0Enter")
+ */
+const write = <T extends HTMLElement = HTMLElement>(target: T, value: string) => {
+    const text = value.trim();
+
+    target.focus();
+    if (target instanceof HTMLInputElement) target.select();
+    if (['Space', 'Enter'].some(x => text === x) && target.tagName === 'BUTTON') {
+        target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        // target.dispatchEvent(new KeyboardEvent('keyup', { key: text, code: text, bubbles: true }));
+    } else {
+        if (target instanceof HTMLInputElement) {
+            const newValue = text.replace(/Enter/g, '').replace(/Space/g, ' ');
+            target.setAttribute('value', newValue);
+            target.value = newValue;
+            target.offsetWidth;
+            // console.log(newValue)
+            // target.dispatchEvent(new KeyboardEvent('input', { bubbles: true }));
+            if (text.endsWith('Enter')) {
+                target.dispatchEvent(new Event('change', { bubbles: true }));
+                // target.dispatchEvent(new KeyboardEvent('keyup', { key: "Enter", code: "Enter", bubbles: true }));
+            }
+
+        }
+    }
+}
+
+export default write;

package/tsconfig.json

@@ -1,29 +1,47 @@
 {
   // https://janessagarrow.com/blog/typescript-and-esbuild/
- "compilerOptions": {
-   "lib": ["DOM", "ESNext", "DOM.Iterable"],
-  //  "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
-   "rootDir": "./src",
-   "baseUrl": "./",
-   "module": "ESNext",
-   "target": "ESNext",
-   "moduleResolution": "Node",
-   "allowJs": true,
-   "forceConsistentCasingInFileNames": true,
-   "useDefineForClassFields": true,
-   "strict": true,
-   "sourceMap": true,
-   "resolveJsonModule": true,
-   "esModuleInterop": true,
-   "isolatedModules": true,
-   "noUnusedLocals": true,
-   "noUnusedParameters": true,
-   "noImplicitReturns": true,
-   "removeComments": false,
-   "allowSyntheticDefaultImports": true,
-   "noEmit": true,
-   "skipLibCheck": true // allows dts-bundle-generator to import from package.json
- },
- "include": ["src/*", "src/**/*"],
- "exclude": ["node_modules", "experiments", "coverage", "dist"],
-}
+  "compilerOptions": {
+    "lib": [
+      "DOM",
+      "ESNext",
+      "DOM.Iterable"
+    ],
+    //  "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
+    "rootDir": "./",
+    "baseUrl": "./",
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "removeComments": false,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "skipLibCheck": true, // allows dts-bundle-generator to import from package.json
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ],
+    }
+  },
+  "include": [
+    "src/*",
+    "src/**/*",
+    "test/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "experiments",
+    "coverage",
+    "dist"
+  ],
+}

package/vite.config.mts

@@ -1,19 +1,12 @@
-/// <reference types="vite/client" />
-"use strict";
-import { resolve } from 'path';
+import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
-import { name } from './package.json';
-
-const getPackageName = () => {
-  return name.includes('@') ? name.split('/')[1] : name;
-};
 
 const NAME = 'ColorPicker';
 
 const fileName = {
-  es: `${getPackageName()}.mjs`,
-  cjs: `${getPackageName()}.cjs`,
-  iife: `${getPackageName()}.js`,
+  es: `color-picker.mjs`,
+  cjs: `color-picker.cjs`,
+  iife: `color-picker.js`,
 };
 
 export default defineConfig({
@@ -27,9 +20,8 @@ export default defineConfig({
       formats: ['es', 'cjs', 'iife'],
       fileName: (format: string) => fileName[format],
     },
-    target: 'ESNext',
     sourcemap: true,
-    minify: true,
+    target: "ESNext",
   },
 });
 

package/vitest.config-ui.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from "vitest/config";
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~": resolve(__dirname, "src"),
+    },
+  },
+  test: {
+    css: true,
+    globals: true,
+    coverage: {
+      provider: "istanbul",
+      reporter: ["html", "text", "lcov"],
+      enabled: true,
+      include: ["src/**/*.{ts,tsx}"],
+    },
+    browser: {
+      // provider: 'webdriverio', // or 'webdriverio'
+      enabled: true,
+      headless: false,
+      name: 'chromium', // browser name is required
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from "vitest/config";
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~": resolve(__dirname, "src"),
+    },
+  },
+  test: {
+    css: true,
+    globals: true,
+    coverage: {
+      provider: "istanbul",
+      reporter: ["html", "text", "lcov"],
+      enabled: true,
+      include: ["src/**/*.{ts,tsx}"],
+    },
+    browser: {
+      provider: 'playwright', // or 'webdriverio'
+      enabled: true,
+      headless: true,
+      name: 'chromium', // browser name is required
+    },
+  },
+});

package/cypress/e2e/color-palette.cy.ts

@@ -1,128 +0,0 @@
-/// <reference types="cypress" />
-
-import Color from "@thednp/color";
-import ColorPalette from "../../src/ts/colorPalette";
-
-describe("ColorPalette Class Test", () => {
-  it("Test init with no parameter, use all default values", () => {
-    cy.wrap(new ColorPalette()).as("cpl")
-      .get("@cpl").should("be.instanceOf", ColorPalette)
-      .get("@cpl").its("hue").should("equal", 0)
-      .get("@cpl").its("hueSteps").should("equal", 12)
-      .get("@cpl").its("lightSteps").should("equal", 10)
-      .get("@cpl").its("colors").its("length").should("equal", 120);
-  });
-
-  it("Test init with 1 parameter, throws error", () => {
-    try {
-      new ColorPalette(0, undefined);
-    } catch (error) {
-      expect(error).to.be.instanceOf(TypeError);
-      expect(error).to.have.property(
-        "message",
-        'ColorPalette: the two minimum arguments must be numbers higher than 0.'
-      );
-    }
-  });
-
-  // it("Test init with 1 parameter, throws error", () => {
-  //   try {
-  //     // @ts-ignore
-  //     new ColorPalette(0, 'a');
-  //   } catch (error) {
-  //     expect(error).to.be.instanceOf(TypeError);
-  //     expect(error).to.have.property(
-  //       "message",
-  //       'ColorPalette only accepts numbers.'
-  //     );
-  //   }
-  // });
-
-  it("Test init with 2 invalid parameters, throws error", () => {
-    try {
-      new ColorPalette(0, 5);
-    } catch (error) {
-      expect(error).to.be.instanceOf(TypeError);
-      expect(error).to.have.property(
-        "message",
-        'ColorPalette: the two minimum arguments must be numbers higher than 0.'
-      );
-    }
-  });
-
-  it("Test init with 2 valid parameters", () => {
-    // generated with new `ColorPalette(1, 5)`
-    const testSample = ["#330000", "#990000", "#ff0000", "#ff6666", "#ffcccc"];
-
-    cy.wrap(new ColorPalette(1, 5)).as("cpl")
-      .get("@cpl").its("hue").should("equal", 0)
-      .get("@cpl").its("hueSteps").should("equal", 1)
-      .get("@cpl").its("lightSteps").should("equal", 5)
-      .get("@cpl").its("saturation").should("equal", 100)
-      .get("@cpl").its("colors").its("length").should("equal", 5)
-      .get("@cpl").its("colors").then((colors) => {
-        // really test every color in the palette
-        colors.forEach((color: Color, i: number) => {
-          cy.log(`${color.ok}`)
-          expect(color).to.be.instanceOf(Color);
-          // expect(color.ok).to.be.true;
-          expect(color.toHexString()).to.equal(testSample[i]);
-        });
-      });
-  });
-
-  it("Test init with 14 lightSteps", () => {
-    // generated with `new ColorPalette(1, 14)`
-    const testSample = [
-      "#330000", "#550000", "#770000", "#990000", "#bb0000",
-      "#dd0000", "#ff0000", "#ff2222", "#ff4444", "#ff6666",
-      "#ff8888", "#ffaaaa", "#ffcccc", "#ffeeee",
-    ];
-
-    cy.wrap(new ColorPalette(1, 14)).as("cpl")
-      .get("@cpl").its("hue").should("equal", 0)
-      .get("@cpl").its("hueSteps").should("equal", 1)
-      .get("@cpl").its("lightSteps").should("equal", 14)
-      .get("@cpl").its("colors").its("length").should("equal", 14)
-      .get("@cpl").its("colors").then((colors) => {
-        expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
-      });
-  });
-
-  it("Test init with 15 lightSteps", () => {
-    // generated with `new ColorPalette(1, 15)`
-    const testSample = [
-      "#110000", "#330000", "#550000", "#770000",
-      "#990000", "#bb0000", "#dd0000", "#ff0000",
-      "#ff2222", "#ff4444", "#ff6666", "#ff8888",
-      "#ffaaaa", "#ffcccc", "#ffeeee",
-    ];
-
-    cy.wrap(new ColorPalette(1, 15)).as("cpl")
-      .get("@cpl").its("hue").should("equal", 0)
-      .get("@cpl").its("hueSteps").should("equal", 1)
-      .get("@cpl").its("lightSteps").should("equal", 15)
-      .get("@cpl").its("colors").its("length").should("equal", 15)
-      .get("@cpl").its("colors").then((colors) => {
-        expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
-      });
-  });
-
-  it("Test init with 3 valid parameters", () => {
-    // generated with `new ColorPalette(270, 1, 10)`
-    const testSample = [
-      "#240047", "#3b0075", "#5200a3", "#6900d1",
-      "#8000ff", "#962eff", "#ad5cff", "#c48aff",
-      "#dbb8ff", "#f2e6ff",
-    ];
-
-    cy.wrap(new ColorPalette(270, 1, 10)).as("cpl")
-      .get("@cpl").its("hue").should("equal", 270)
-      .get("@cpl").its("hueSteps").should("equal", 1)
-      .get("@cpl").its("lightSteps").should("equal", 10)
-      .get("@cpl").its("colors").its("length").should("equal", 10)
-      .get("@cpl").its("colors").then((colors) => {
-        expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
-      });
-  });
-});