@thednp/color-picker 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +4 -4
  2. package/dist/css/color-picker.css +7 -7
  3. package/dist/css/color-picker.min.css +2 -2
  4. package/dist/css/color-picker.rtl.css +7 -7
  5. package/dist/css/color-picker.rtl.min.css +2 -2
  6. package/dist/js/color-picker.cjs +2 -2
  7. package/dist/js/color-picker.cjs.map +1 -1
  8. package/dist/js/color-picker.js +2 -2
  9. package/dist/js/color-picker.js.map +1 -1
  10. package/dist/js/color-picker.mjs +243 -239
  11. package/dist/js/color-picker.mjs.map +1 -1
  12. package/package.json +32 -35
  13. package/src/scss/color-picker.scss +6 -4
  14. package/src/ts/colorPalette.ts +2 -2
  15. package/src/ts/index.ts +20 -19
  16. package/test/color-palette.test.ts +137 -0
  17. package/test/color-picker.test.ts +705 -0
  18. package/{cypress → test}/fixtures/getMarkup.js +8 -7
  19. package/test/fixtures/swipe.ts +33 -0
  20. package/test/fixtures/write.ts +37 -0
  21. package/tsconfig.json +45 -27
  22. package/{vite.config.ts → vite.config.mts} +5 -12
  23. package/vitest.config-ui.ts +26 -0
  24. package/vitest.config.ts +26 -0
  25. package/cypress/e2e/color-palette.cy.ts +0 -128
  26. package/cypress/e2e/color-picker.cy.ts +0 -909
  27. package/cypress/plugins/esbuild-istanbul.ts +0 -50
  28. package/cypress/plugins/tsCompile.ts +0 -34
  29. package/cypress/support/commands.ts +0 -0
  30. package/cypress/support/e2e.ts +0 -21
  31. package/cypress/test.html +0 -23
  32. package/cypress.config.ts +0 -29
  33. /package/{compile.js → compile.cjs} +0 -0
  34. /package/{cypress → test}/fixtures/colorNamesFrench.js +0 -0
  35. /package/{cypress → test}/fixtures/componentLabelsFrench.js +0 -0
  36. /package/{cypress → test}/fixtures/format.js +0 -0
  37. /package/{cypress → test}/fixtures/getRandomInt.js +0 -0
  38. /package/{cypress → test}/fixtures/sampleWebcolors.js +0 -0
  39. /package/{cypress → test}/fixtures/testSample.js +0 -0
@@ -1,10 +1,12 @@
1
1
  import testSample from "./testSample";
2
2
  import getRandomInt from "./getRandomInt";
3
3
 
4
- export default function getMarkup(body, id, format) {
4
+ export default function getMarkup(id, format) {
5
5
  const set = testSample[getRandomInt(0,3)];
6
6
  const value = set[format];
7
7
 
8
+ const container = document.createElement('div');
9
+
8
10
  const label = document.createElement('label');
9
11
  label.setAttribute('for', `color-picker-${id}`);
10
12
  label.innerText = `Color Picker Test`;
@@ -25,11 +27,10 @@ export default function getMarkup(body, id, format) {
25
27
  a.setAttribute('href', '#');
26
28
  a.innerText = 'Some link';
27
29
  a.className = 'my-link';
28
- a.style = 'position: absolute; top: 20px; opacity: 0.015';
29
- // body.append(a);
30
+ a.style = 'position: absolute; top: 0px; right:0; opacity: 0.015';
31
+
30
32
  cpWrapper.append(input);
31
- if (body) {
32
- body.append(label, cpWrapper, a);
33
- }
34
- return {set, value};
33
+ container.append(label, cpWrapper, a);
34
+
35
+ return { container, set, value};
35
36
  }
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Triggers a number of pointer events for a given target and
3
+ * an array of coordinates.
4
+ * @param target the element to dispatch the pointer event(s)
5
+ * @param points an array of [clientX, clientY] coordinates
6
+ * @param offset an optional offset object of { x, y } coordinates
7
+ */
8
+ const swipe = <T extends HTMLElement = HTMLElement>(target: T, points: [number, number][], offset?: { x: number, y: number }) => {
9
+ const rect = target.getBoundingClientRect();
10
+ const offsetX = Number.isInteger(offset?.x) ? offset!.x : rect.left;
11
+ const offsetY = Number.isInteger(offset?.y) ? offset!.y : rect.top;
12
+ if (points.length === 1) points.push([0,0]);
13
+
14
+ points.forEach(([x,y], i) => {
15
+ // first is a pointerdown, last is a pointerup and all pointermove in between
16
+ const ev = i === 0 ? 'pointerdown' : i === points.length - 1 ? 'pointerup' : 'pointermove';
17
+ const point = new PointerEvent(ev, {
18
+ clientX: x + offsetX, clientY: y + offsetY,
19
+ pressure: 1,
20
+ bubbles: true, // Whether the event should bubble up the DOM
21
+ cancelable: true, // Whether the event can be canceled
22
+ pointerId: 0, // The ID of the pointer (e.g., a touch point)
23
+ pointerType: "touch", // The type of pointer (e.g., touch or mouse)
24
+ width: 1, // The width of the pointer (in pixels)
25
+ height: 1, // The height of the pointer (in pixels)
26
+ isPrimary: true, // Whether this is the primary pointer (true) or not (false)
27
+ });
28
+ target.dispatchEvent(point);
29
+ target.offsetWidth;
30
+ });
31
+ };
32
+
33
+ export default swipe;
@@ -0,0 +1,37 @@
1
+ /**
2
+ * A simple utility to type text into input elements.
3
+ * It will split the string provided and replace spaces with Space keyboard key
4
+ * and will trigger a dispatch for each keyboard key found in the string.
5
+ * @param target A button, input element or editable element
6
+ * @param value the text to type
7
+ *
8
+ * @example
9
+ * write(target, "hsl 150 0 0")
10
+ * write(target, "hslSpace150Space0Space0Enter")
11
+ */
12
+ const write = <T extends HTMLElement = HTMLElement>(target: T, value: string) => {
13
+ const text = value.trim();
14
+
15
+ target.focus();
16
+ if (target instanceof HTMLInputElement) target.select();
17
+ if (['Space', 'Enter'].some(x => text === x) && target.tagName === 'BUTTON') {
18
+ target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
19
+ // target.dispatchEvent(new KeyboardEvent('keyup', { key: text, code: text, bubbles: true }));
20
+ } else {
21
+ if (target instanceof HTMLInputElement) {
22
+ const newValue = text.replace(/Enter/g, '').replace(/Space/g, ' ');
23
+ target.setAttribute('value', newValue);
24
+ target.value = newValue;
25
+ target.offsetWidth;
26
+ // console.log(newValue)
27
+ // target.dispatchEvent(new KeyboardEvent('input', { bubbles: true }));
28
+ if (text.endsWith('Enter')) {
29
+ target.dispatchEvent(new Event('change', { bubbles: true }));
30
+ // target.dispatchEvent(new KeyboardEvent('keyup', { key: "Enter", code: "Enter", bubbles: true }));
31
+ }
32
+
33
+ }
34
+ }
35
+ }
36
+
37
+ export default write;
package/tsconfig.json CHANGED
@@ -1,29 +1,47 @@
1
1
  {
2
2
  // https://janessagarrow.com/blog/typescript-and-esbuild/
3
- "compilerOptions": {
4
- "lib": ["DOM", "ESNext", "DOM.Iterable"],
5
- // "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
6
- "rootDir": "./",
7
- "baseUrl": "./",
8
- "module": "ESNext",
9
- "target": "ESNext",
10
- "moduleResolution": "Node",
11
- "allowJs": true,
12
- "forceConsistentCasingInFileNames": true,
13
- "useDefineForClassFields": true,
14
- "strict": true,
15
- "sourceMap": true,
16
- "resolveJsonModule": true,
17
- "esModuleInterop": true,
18
- "isolatedModules": true,
19
- "noUnusedLocals": true,
20
- "noUnusedParameters": true,
21
- "noImplicitReturns": true,
22
- "removeComments": false,
23
- "allowSyntheticDefaultImports": true,
24
- "noEmit": true,
25
- "skipLibCheck": true // allows dts-bundle-generator to import from package.json
26
- },
27
- "include": ["src/*", "src/**/*"],
28
- "exclude": ["node_modules", "experiments", "coverage", "dist"],
29
- }
3
+ "compilerOptions": {
4
+ "lib": [
5
+ "DOM",
6
+ "ESNext",
7
+ "DOM.Iterable"
8
+ ],
9
+ // "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
10
+ "rootDir": "./",
11
+ "baseUrl": "./",
12
+ "module": "ESNext",
13
+ "target": "ESNext",
14
+ "moduleResolution": "Bundler",
15
+ "allowJs": true,
16
+ "forceConsistentCasingInFileNames": true,
17
+ "useDefineForClassFields": true,
18
+ "strict": true,
19
+ "sourceMap": true,
20
+ "resolveJsonModule": true,
21
+ "esModuleInterop": true,
22
+ "isolatedModules": true,
23
+ "noUnusedLocals": true,
24
+ "noUnusedParameters": true,
25
+ "noImplicitReturns": true,
26
+ "removeComments": false,
27
+ "allowSyntheticDefaultImports": true,
28
+ "noEmit": true,
29
+ "skipLibCheck": true, // allows dts-bundle-generator to import from package.json
30
+ "paths": {
31
+ "~/*": [
32
+ "./src/*"
33
+ ],
34
+ }
35
+ },
36
+ "include": [
37
+ "src/*",
38
+ "src/**/*",
39
+ "test/**/*"
40
+ ],
41
+ "exclude": [
42
+ "node_modules",
43
+ "experiments",
44
+ "coverage",
45
+ "dist"
46
+ ],
47
+ }
@@ -1,18 +1,12 @@
1
- "use strict";
2
- import { resolve } from 'path';
1
+ import { resolve } from 'node:path';
3
2
  import { defineConfig } from 'vite';
4
- import { name } from './package.json';
5
-
6
- const getPackageName = () => {
7
- return name.includes('@') ? name.split('/')[1] : name;
8
- };
9
3
 
10
4
  const NAME = 'ColorPicker';
11
5
 
12
6
  const fileName = {
13
- es: `${getPackageName()}.mjs`,
14
- cjs: `${getPackageName()}.cjs`,
15
- iife: `${getPackageName()}.js`,
7
+ es: `color-picker.mjs`,
8
+ cjs: `color-picker.cjs`,
9
+ iife: `color-picker.js`,
16
10
  };
17
11
 
18
12
  export default defineConfig({
@@ -26,9 +20,8 @@ export default defineConfig({
26
20
  formats: ['es', 'cjs', 'iife'],
27
21
  fileName: (format: string) => fileName[format],
28
22
  },
29
- target: 'ESNext',
30
23
  sourcemap: true,
31
- minify: true,
24
+ target: "ESNext",
32
25
  },
33
26
  });
34
27
 
@@ -0,0 +1,26 @@
1
+ import { defineConfig } from "vitest/config";
2
+ import { resolve } from 'node:path';
3
+
4
+ export default defineConfig({
5
+ resolve: {
6
+ alias: {
7
+ "~": resolve(__dirname, "src"),
8
+ },
9
+ },
10
+ test: {
11
+ css: true,
12
+ globals: true,
13
+ coverage: {
14
+ provider: "istanbul",
15
+ reporter: ["html", "text", "lcov"],
16
+ enabled: true,
17
+ include: ["src/**/*.{ts,tsx}"],
18
+ },
19
+ browser: {
20
+ // provider: 'webdriverio', // or 'webdriverio'
21
+ enabled: true,
22
+ headless: false,
23
+ name: 'chromium', // browser name is required
24
+ },
25
+ },
26
+ });
@@ -0,0 +1,26 @@
1
+ import { defineConfig } from "vitest/config";
2
+ import { resolve } from 'node:path';
3
+
4
+ export default defineConfig({
5
+ resolve: {
6
+ alias: {
7
+ "~": resolve(__dirname, "src"),
8
+ },
9
+ },
10
+ test: {
11
+ css: true,
12
+ globals: true,
13
+ coverage: {
14
+ provider: "istanbul",
15
+ reporter: ["html", "text", "lcov"],
16
+ enabled: true,
17
+ include: ["src/**/*.{ts,tsx}"],
18
+ },
19
+ browser: {
20
+ provider: 'playwright', // or 'webdriverio'
21
+ enabled: true,
22
+ headless: true,
23
+ name: 'chromium', // browser name is required
24
+ },
25
+ },
26
+ });
@@ -1,128 +0,0 @@
1
- /// <reference types="cypress" />
2
-
3
- import Color from "@thednp/color";
4
- import ColorPalette from "../../src/ts/colorPalette";
5
-
6
- describe("ColorPalette Class Test", () => {
7
- it("Test init with no parameter, use all default values", () => {
8
- cy.wrap(new ColorPalette()).as("cpl")
9
- .get("@cpl").should("be.instanceOf", ColorPalette)
10
- .get("@cpl").its("hue").should("equal", 0)
11
- .get("@cpl").its("hueSteps").should("equal", 12)
12
- .get("@cpl").its("lightSteps").should("equal", 10)
13
- .get("@cpl").its("colors").its("length").should("equal", 120);
14
- });
15
-
16
- it("Test init with 1 parameter, throws error", () => {
17
- try {
18
- new ColorPalette(0, undefined);
19
- } catch (error) {
20
- expect(error).to.be.instanceOf(TypeError);
21
- expect(error).to.have.property(
22
- "message",
23
- 'ColorPalette: the two minimum arguments must be numbers higher than 0.'
24
- );
25
- }
26
- });
27
-
28
- // it("Test init with 1 parameter, throws error", () => {
29
- // try {
30
- // // @ts-ignore
31
- // new ColorPalette(0, 'a');
32
- // } catch (error) {
33
- // expect(error).to.be.instanceOf(TypeError);
34
- // expect(error).to.have.property(
35
- // "message",
36
- // 'ColorPalette only accepts numbers.'
37
- // );
38
- // }
39
- // });
40
-
41
- it("Test init with 2 invalid parameters, throws error", () => {
42
- try {
43
- new ColorPalette(0, 5);
44
- } catch (error) {
45
- expect(error).to.be.instanceOf(TypeError);
46
- expect(error).to.have.property(
47
- "message",
48
- 'ColorPalette: the two minimum arguments must be numbers higher than 0.'
49
- );
50
- }
51
- });
52
-
53
- it("Test init with 2 valid parameters", () => {
54
- // generated with new `ColorPalette(1, 5)`
55
- const testSample = ["#330000", "#990000", "#ff0000", "#ff6666", "#ffcccc"];
56
-
57
- cy.wrap(new ColorPalette(1, 5)).as("cpl")
58
- .get("@cpl").its("hue").should("equal", 0)
59
- .get("@cpl").its("hueSteps").should("equal", 1)
60
- .get("@cpl").its("lightSteps").should("equal", 5)
61
- .get("@cpl").its("saturation").should("equal", 100)
62
- .get("@cpl").its("colors").its("length").should("equal", 5)
63
- .get("@cpl").its("colors").then((colors) => {
64
- // really test every color in the palette
65
- colors.forEach((color: Color, i: number) => {
66
- cy.log(`${color.ok}`)
67
- expect(color).to.be.instanceOf(Color);
68
- // expect(color.ok).to.be.true;
69
- expect(color.toHexString()).to.equal(testSample[i]);
70
- });
71
- });
72
- });
73
-
74
- it("Test init with 14 lightSteps", () => {
75
- // generated with `new ColorPalette(1, 14)`
76
- const testSample = [
77
- "#330000", "#550000", "#770000", "#990000", "#bb0000",
78
- "#dd0000", "#ff0000", "#ff2222", "#ff4444", "#ff6666",
79
- "#ff8888", "#ffaaaa", "#ffcccc", "#ffeeee",
80
- ];
81
-
82
- cy.wrap(new ColorPalette(1, 14)).as("cpl")
83
- .get("@cpl").its("hue").should("equal", 0)
84
- .get("@cpl").its("hueSteps").should("equal", 1)
85
- .get("@cpl").its("lightSteps").should("equal", 14)
86
- .get("@cpl").its("colors").its("length").should("equal", 14)
87
- .get("@cpl").its("colors").then((colors) => {
88
- expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
89
- });
90
- });
91
-
92
- it("Test init with 15 lightSteps", () => {
93
- // generated with `new ColorPalette(1, 15)`
94
- const testSample = [
95
- "#110000", "#330000", "#550000", "#770000",
96
- "#990000", "#bb0000", "#dd0000", "#ff0000",
97
- "#ff2222", "#ff4444", "#ff6666", "#ff8888",
98
- "#ffaaaa", "#ffcccc", "#ffeeee",
99
- ];
100
-
101
- cy.wrap(new ColorPalette(1, 15)).as("cpl")
102
- .get("@cpl").its("hue").should("equal", 0)
103
- .get("@cpl").its("hueSteps").should("equal", 1)
104
- .get("@cpl").its("lightSteps").should("equal", 15)
105
- .get("@cpl").its("colors").its("length").should("equal", 15)
106
- .get("@cpl").its("colors").then((colors) => {
107
- expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
108
- });
109
- });
110
-
111
- it("Test init with 3 valid parameters", () => {
112
- // generated with `new ColorPalette(270, 1, 10)`
113
- const testSample = [
114
- "#240047", "#3b0075", "#5200a3", "#6900d1",
115
- "#8000ff", "#962eff", "#ad5cff", "#c48aff",
116
- "#dbb8ff", "#f2e6ff",
117
- ];
118
-
119
- cy.wrap(new ColorPalette(270, 1, 10)).as("cpl")
120
- .get("@cpl").its("hue").should("equal", 270)
121
- .get("@cpl").its("hueSteps").should("equal", 1)
122
- .get("@cpl").its("lightSteps").should("equal", 10)
123
- .get("@cpl").its("colors").its("length").should("equal", 10)
124
- .get("@cpl").its("colors").then((colors) => {
125
- expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
126
- });
127
- });
128
- });