@thednp/color-picker 2.0.2 → 2.0.4

package/test/fixtures/colorNamesFrench.js

@@ -1,3 +0,0 @@
-const colorNamesFrench = 'blanc,noir,gris,rouge,orange,brun,or,olive,jaune,citron,vert,sarcelle,cyan,bleu,violet,magenta,rose';
-
-export default colorNamesFrench;

package/test/fixtures/componentLabelsFrench.js

@@ -1,21 +0,0 @@
-const componentLabelsFrench = {
-  pickerLabel: "Couleur Sélection", 
-  appearanceLabel: "Apparence de la couleur", 
-  valueLabel: "Valeur de couleur", 
-  toggleLabel: "Sélectionner la couleur", 
-  presetsLabel: "Préréglages de couleur", 
-  defaultsLabel: "Couleur par défaut", 
-  formatLabel: "Format", 
-  alphaLabel: "Alpha", 
-  hexLabel: "Hexadécimal", 
-  hueLabel: "Nuance", 
-  whitenessLabel: "Blancheur", 
-  blacknessLabel: "Noirceur", 
-  saturationLabel: "Saturation", 
-  lightnessLabel: "Légèreté", 
-  redLabel: "Rouge", 
-  greenLabel: "Vert", 
-  blueLabel: "Bleu",
-};
-
-export default componentLabelsFrench;

package/test/fixtures/format.js

@@ -1,3 +0,0 @@
-const FORMAT = ['hsl', 'rgb', 'hwb', 'hex'];
-
-export default FORMAT;

package/test/fixtures/getMarkup.js

@@ -1,36 +0,0 @@
-import testSample from "./testSample";
-import getRandomInt from "./getRandomInt";
-
-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`;
-
-  const cpWrapper = document.createElement('div');
-  cpWrapper.className = 'color-picker';
-
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.id = `color-picker-${id}`;
-  input.className = 'btn-appearance color-preview';
-  input.setAttribute('value', value);
-  input.setAttribute('autocomplete', "off");
-  input.setAttribute('spellcheck', "false");
-  input.setAttribute('data-format', format);
-
-  const a = document.createElement('a');
-  a.setAttribute('href', '#');
-  a.innerText = 'Some link';
-  a.className = 'my-link';
-  a.style = 'position: absolute; top: 0px; right:0; opacity: 0.015';
-
-  cpWrapper.append(input);
-  container.append(label, cpWrapper, a);
-
-  return { container, set, value};
-}

package/test/fixtures/getRandomInt.js

@@ -1,6 +0,0 @@
-export default function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.round(max);
-  // The maximum is exclusive and the minimum is inclusive
-  return Math.round(Math.random() * (max - min) + min);
-}

package/test/fixtures/sampleWebcolors.js

@@ -1,18 +0,0 @@
-const sampleWebcolors = [
-  {name:"white",rgb:"rgb(255, 255, 255)",hex:"#ffffff",hsl:"hsl(0, 0%, 100%)",hsl4:"hsl(0deg 0% 100%)",hwb:"hwb(0deg 100% 0%)",hsv:{h:0,s:0,v:1,a:1}},
-  {name:"black",rgb:"rgb(0, 0, 0)",hex:"#000000",hsl:"hsl(0, 0%, 0%)",hsl4:"hsl(0deg 0% 0%)",hwb:"hwb(0deg 0% 100%)",hsv:{h:0,s:0,v:0,a:1}},
-  {name:"yellow",rgb:"rgb(255, 255, 0)",hex:"#ffff00",hsl:"hsl(60, 100%, 50%)",hsl4:"hsl(60deg 100% 50%)",hwb:"hwb(60deg 0% 0%)",hsv: {h: 0.167, s: 1, v: 1, a: 1}},
-  {name:"green",rgb:"rgb(0, 128, 0)",hex:"#008000",hsl:"hsl(120, 100%, 25%)",hsl4:"hsl(120deg 100% 25%)",hwb:"hwb(120deg 0% 50%)",hsv: {h: 0.333, s: 1, v: 0.502, a: 1}},
-  {name:"red",rgb:"rgb(255, 0, 0)",hex:"#ff0000",hsl:"hsl(0, 100%, 50%)",hsl4:"hsl(0deg 100% 50%)",hwb:"hwb(0deg 0% 0%)",hsv:{h:0,s:1,v:1,a:1}},
-  {name:"pink",rgb:"rgb(255, 192, 203)",hex:"#ffc0cb",hsl:"hsl(350, 100%, 88%)",hsl4:"hsl(350deg 100% 88%)",hwb:"hwb(350deg 75% 0%)",hsv:{h:0.971,s:0.247,v:1,a:1}},
-  {name:"brown",rgb:"rgb(165, 42, 42)",hex:"#a52a2a",hsl:"hsl(0, 59%, 41%)",hsl4:"hsl(0deg 59% 41%)",hwb:"hwb(0deg 16% 35%)",hsv:{h:0,s:0.745,v:0.647,a:1}},
-  {name:"orange",rgb:"rgb(255, 165, 0)",hex:"#ffa500",hsl:"hsl(39, 100%, 50%)",hsl4:"hsl(39deg 100% 50%)",hwb:"hwb(39deg 0% 0%)",hsv:{h:0.108,s:1,v:1,a:1}},
-  {name:"darkorange",rgb:"rgb(255, 140, 0)",hex:"#ff8c00",hsl:"hsl(33, 100%, 50%)",hsl4:"hsl(33deg 100% 50%)",hwb:"hwb(33deg 0% 0%)",hsv:{h:0.092,s:1,v:1,a:1}},
-  {name:"cyan",rgb:"rgb(0, 255, 255)",hex:"#00ffff",hsl:"hsl(180, 100%, 50%)",hsl4:"hsl(180deg 100% 50%)",hwb:"hwb(180deg 0% 0%)",hsv:{h:0.5,s:1,v:1,a:1}},
-  {name:"yellow",rgb:"rgb(255, 255, 0)",hex:"#ffff00",hsl:"hsl(60, 100%, 50%)",hsl4:"hsl(60deg 100% 50%)",hwb:"hwb(60deg 0% 0%)",hsv:{h:0.167,s:1,v:1,a:1}},
-  {name:"navy",rgb:"rgb(0, 0, 128)",hex:"#000080",hsl:"hsl(240, 100%, 25%)",hsl4:"hsl(240deg 100% 25%)",hwb:"hwb(240deg 0% 50%)",hsv:{h:0.667,s:1,v:0.502,a:1}},
-  {name:"orchid",rgb:"rgb(218, 112, 214)",hex:"#da70d6",hsl:"hsl(302, 59%, 65%)",hsl4:"hsl(302deg 59% 65%)",hwb:"hwb(302deg 44% 15%)",hsv:{h: 0.84, s: 0.486, v: 0.855, a: 1}},
-  {name:"indigo",rgb:"rgb(75, 0, 130)",hex:"#4b0082",hsl:"hsl(275, 100%, 25%)",hsl4:"hsl(275deg 100% 25%)",hwb:"hwb(275deg 0% 49%)",hsv:{h: 0.763, s: 1, v: 0.51, a: 1}},
-];
-
-export default sampleWebcolors;

package/test/fixtures/swipe.ts

@@ -1,33 +0,0 @@
-/**
- * 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/testSample.js

@@ -1,8 +0,0 @@
-const testSample = [
-  {name: 'red', hex: '#f00', rgb: 'rgb(255, 0, 0)', hsl: 'hsl(0, 100%, 50%)', hwb: 'hwb(0deg 0% 0%)'},
-  {name: 'lime', hex: '#0f0', rgb: 'rgb(0, 255, 0)', hsl: 'hsl(120, 100%, 50%)', hwb: 'hwb(120deg 0% 0%)'},
-  {name: 'blue', hex: '#00f', rgb: 'rgb(0, 0, 255)', hsl: 'hsl(240, 100%, 50%)', hwb: 'hwb(240deg 0% 0%)'},
-  {name: 'pink', hex: '#f0f', rgb: 'rgb(255, 0, 255)', hsl: 'hsl(300, 100%, 50%)', hwb: 'hwb(300deg 0% 0%)'},
-];
-
-export default testSample;

package/test/fixtures/write.ts

@@ -1,37 +0,0 @@
-/**
- * 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,47 +0,0 @@
-{
-  // https://janessagarrow.com/blog/typescript-and-esbuild/
-  "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,27 +0,0 @@
-import { resolve } from 'node:path';
-import { defineConfig } from 'vite';
-
-const NAME = 'ColorPicker';
-
-const fileName = {
-  es: `color-picker.mjs`,
-  cjs: `color-picker.cjs`,
-  iife: `color-picker.js`,
-};
-
-export default defineConfig({
-  base: './',
-  build: {
-    emptyOutDir: true,
-    outDir: 'dist/js',
-    lib: {
-      entry: resolve(__dirname, 'src/ts/index.ts'),
-      name: NAME,
-      formats: ['es', 'cjs', 'iife'],
-      fileName: (format: string) => fileName[format],
-    },
-    sourcemap: true,
-    target: "ESNext",
-  },
-});
-

package/vitest.config-ui.ts

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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
-    },
-  },
-});