npm - @kokimoki/kit - Versions diffs - 1.0.0 - Mend

@kokimoki/kit 1.0.0

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 (7) hide show

package/dist/index.d.ts +2 -0
package/dist/index.js +2 -0
package/dist/kokimoki-kit-plugin.d.ts +2 -0
package/dist/kokimoki-kit-plugin.js +84 -0
package/dist/preprocess-style.d.ts +32 -0
package/dist/preprocess-style.js +362 -0
package/package.json +25 -0

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./kokimoki-kit-plugin";
2	+ export * from "./preprocess-style";

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./kokimoki-kit-plugin";
2	+ export * from "./preprocess-style";

package/dist/kokimoki-kit-plugin.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { Plugin } from "vite";
2	+ export declare const kokimokiKitPlugin: () => Plugin;

package/dist/kokimoki-kit-plugin.js ADDED Viewed

@@ -0,0 +1,84 @@
+import ObjectId from "bson-objectid";
+import fs from "fs/promises";
+import { preprocessStyle } from "./preprocess-style";
+export const kokimokiKitPlugin = () => {
+    return {
+        name: "kokimoki-kit",
+        async transform(code, id) {
+            if (id.endsWith("kokimoki.style.css")) {
+                return preprocessStyle(code);
+            }
+            return code;
+        },
+        async transformIndexHtml(html) {
+            // NOTE: Try https://github.com/jsdom/jsdom instead of regex parsing
+            if (process.env.NODE_ENV !== "development") {
+                return html
+                    .replace("<head>", `<head>
+              <base href="%KM_BASE%">
+              <script id="kokimoki-env" type="application/json">
+              {
+                "dev": %KM_DEV%,
+                "test": %KM_TEST%,
+                "host": "%KM_HOST%",
+                "appId": "%KM_APP_ID%",
+                "code": "%KM_CODE%",
+                "clientContext": "%KM_CLIENT_CONTEXT%",
+                "config": "%KM_CONFIG%",
+                "base": "%KM_BASE%",
+                "assets": "%KM_ASSETS%"
+              }
+              </script>
+              <script>
+                window.__toAssetsUrl = (path) => "%KM_ASSETS%/" + path;
+              </script>
+            `)
+                    .replace(/<link.*?href="(.*?)".*?>/g, (match, p1) => {
+                    return match.replace(p1, `%KM_ASSETS%${p1.startsWith("/") ? "" : "/"}${p1}`);
+                })
+                    .replace(/<script.*?src="(.*?)".*?>/g, (match, p1) => {
+                    return match.replace(p1, `%KM_ASSETS%${p1.startsWith("/") ? "" : "/"}${p1}`);
+                });
+            }
+            // Ensure .kokimoki directory exists
+            try {
+                await fs.mkdir(".kokimoki");
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            catch (e) {
+                if (e?.code !== "EEXIST") {
+                    throw e;
+                }
+            }
+            // Try to read the app id from the .kokimoki/app-id file
+            let appId;
+            try {
+                appId = await fs.readFile(".kokimoki/app-id", "utf8");
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            catch (e) {
+                if (e?.code !== "ENOENT") {
+                    throw e;
+                }
+            }
+            // If the app id doesn't exist, generate a new one
+            if (!appId) {
+                appId = new ObjectId().toHexString();
+                await fs.writeFile(".kokimoki/app-id", appId);
+            }
+            // Inject the app id into the index.html
+            html = html.replace("<head>", `<head>
+          <script id="kokimoki-env" type="application/json">
+          {
+            "dev": true,
+            "test": true,
+            "host": "y-wss.kokimoki.com",
+            "appId": "${appId}",
+            "base": "/",
+            "assets": "/"
+          }
+          </script>`);
+            return html;
+        },
+    };
+};

package/dist/preprocess-style.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+export type Palette = {
+    [key: number]: {
+        /** The hex color. */
+        hex: string;
+        /** The RGB color. */
+        rgb: string;
+        /** The overlapping text/fill color. */
+        on: string;
+    };
+};
+type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function revertReplaceForColorPickers(code: string): string;
+export declare function hexToTailwindRgbString(hex: string): string;
+/** Takes the RGB and returns the luminance of it */
+export declare function getLuminance(r: Rgb): number;
+export declare function getLuminance(r: number, g: number, b: number): number;
+export declare function calculateRatio(luminance1: string | number, luminance2: string | number): number;
+export declare function handleStringColor(colorString: string): Rgb;
+export declare function handleStringColor(colorString: string, returnType: "rgb"): Rgb;
+export declare function handleStringColor(colorString: string, returnType: "hex"): string;
+export declare function handleStringColor(colorString: string, returnType?: "hex" | "rgb"): string | Rgb;
+export declare function destringRgb(rgbString: string): Rgb;
+export declare function generateA11yOnColor(hex: string): "255 255 255" | "0 0 0";
+export declare function generatePalette(baseColor: string): Palette;
+export declare function preprocessStyle(code: string): string;
+export {};

package/dist/preprocess-style.js ADDED Viewed

@@ -0,0 +1,362 @@
+import colorNameToHex from "colornames";
+import Color from "colorjs.io";
+// List of rgb tuple variable names (possibly temporary system to support color picker for these variables)
+const rgbTupleVariableNames = [
+    "theme-font-color-base",
+    "theme-font-color-dark",
+    "theme-rounded-base",
+    "theme-rounded-container",
+    "theme-border-base",
+    "on-primary",
+    "on-secondary",
+    "on-tertiary",
+    "on-success",
+    "on-warning",
+    "on-error",
+    "on-surface",
+    "color-primary-50",
+    "color-primary-100",
+    "color-primary-200",
+    "color-primary-300",
+    "color-primary-400",
+    "color-primary-500",
+    "color-primary-600",
+    "color-primary-700",
+    "color-primary-800",
+    "color-primary-900",
+    "color-secondary-50",
+    "color-secondary-100",
+    "color-secondary-200",
+    "color-secondary-300",
+    "color-secondary-400",
+    "color-secondary-500",
+    "color-secondary-600",
+    "color-secondary-700",
+    "color-secondary-800",
+    "color-secondary-900",
+    "color-tertiary-50",
+    "color-tertiary-100",
+    "color-tertiary-200",
+    "color-tertiary-300",
+    "color-tertiary-400",
+    "color-tertiary-500",
+    "color-tertiary-600",
+    "color-tertiary-700",
+    "color-tertiary-800",
+    "color-tertiary-900",
+    "color-success-50",
+    "color-success-100",
+    "color-success-200",
+    "color-success-300",
+    "color-success-400",
+    "color-success-500",
+    "color-success-600",
+    "color-success-700",
+    "color-success-800",
+    "color-success-900",
+    "color-warning-50",
+    "color-warning-100",
+    "color-warning-200",
+    "color-warning-300",
+    "color-warning-400",
+    "color-warning-500",
+    "color-warning-600",
+    "color-warning-700",
+    "color-warning-800",
+    "color-warning-900",
+    "color-error-50",
+    "color-error-100",
+    "color-error-200",
+    "color-error-300",
+    "color-error-400",
+    "color-error-500",
+    "color-error-600",
+    "color-error-700",
+    "color-error-800",
+    "color-error-900",
+    "color-surface-50",
+    "color-surface-100",
+    "color-surface-200",
+    "color-surface-300",
+    "color-surface-400",
+    "color-surface-500",
+    "color-surface-600",
+    "color-surface-700",
+    "color-surface-800",
+    "color-surface-900",
+];
+export function hexToRgb(hex) {
+    const sanitizedHex = hex.replace(/##/g, "#");
+    const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+    if (!colorParts)
+        return null;
+    const [, r, g, b] = colorParts;
+    return {
+        r: parseInt(r, 16),
+        g: parseInt(g, 16),
+        b: parseInt(b, 16),
+    };
+}
+export function rgbToHex(r, g, b) {
+    const toHex = (c) => `0${c.toString(16)}`.slice(-2);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+// export function replaceForColorPickers(code: string) {
+//   return code.replace(
+//     /--([a-z0-9-]+):\s*(\d+)\s+(\d+)\s+(\d+);/gi,
+//     (match, name, r, g, b) => {
+//       if (!rgbTupleVariableNames.includes(name)) return match;
+//       return `--${name}: ${rgbToHex(Number(r), Number(g), Number(b))};`;
+//     }
+//   );
+// }
+export function revertReplaceForColorPickers(code) {
+    return code.replace(/--([a-z0-9-]+):(.*?);/gi, (match, name, value) => {
+        if (!rgbTupleVariableNames.includes(name))
+            return match;
+        value = value.trim();
+        if (value.startsWith("#")) {
+            const rgb = hexToRgb(value);
+            if (rgb)
+                return `--${name}: ${rgb.r} ${rgb.g} ${rgb.b};`;
+        }
+        if (value.startsWith("rgb")) {
+            const [r, g, b] = value
+                .replace("rgb(", "")
+                .replace(")", "")
+                .split(",")
+                .map((x) => x.trim());
+            return `--${name}: ${r} ${g} ${b};`;
+        }
+        const hex = colorNameToHex(value);
+        if (hex) {
+            const rgb = hexToRgb(hex);
+            if (rgb)
+                return `--${name}: ${rgb.r} ${rgb.g} ${rgb.b};`;
+        }
+        return match;
+    });
+}
+function lighten(hex, intensity) {
+    const color = hexToRgb(`#${hex}`);
+    if (!color)
+        return "";
+    const r = Math.round(color.r + (255 - color.r) * intensity);
+    const g = Math.round(color.g + (255 - color.g) * intensity);
+    const b = Math.round(color.b + (255 - color.b) * intensity);
+    return rgbToHex(r, g, b);
+}
+function darken(hex, intensity) {
+    const color = hexToRgb(hex);
+    if (!color)
+        return "";
+    const r = Math.round(color.r * intensity);
+    const g = Math.round(color.g * intensity);
+    const b = Math.round(color.b * intensity);
+    return rgbToHex(r, g, b);
+}
+export function hexToTailwindRgbString(hex) {
+    const sanitizedHex = hex.replace(/##/g, "#");
+    const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+    if (!colorParts)
+        return "(invalid)";
+    const [, r, g, b] = colorParts;
+    return `${parseInt(r, 16)} ${parseInt(g, 16)} ${parseInt(b, 16)}`;
+}
+export function getLuminance(r, g, b) {
+    const { _r, _g, _b } = typeof r === "object"
+        ? { _r: r.r, _g: r.g, _b: r.b }
+        : { _r: r, _g: g, _b: b }; // I'm not really happy with this ternary, but it works
+    // we can't use !_r shorthand here because 0 is a valid value
+    if (_r === undefined || _g === undefined || _b === undefined)
+        throw new Error("Invalid RGB value!");
+    const a = [_r, _g, _b].map(function (v) {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+export function calculateRatio(luminance1, luminance2) {
+    const lum1 = typeof luminance1 === "string"
+        ? getLuminance(handleStringColor(luminance1))
+        : luminance1;
+    const lum2 = typeof luminance2 === "string"
+        ? getLuminance(handleStringColor(luminance2))
+        : luminance2;
+    if (lum1 === undefined || lum2 === undefined)
+        throw new Error("Luminance is undefined!");
+    return lum1 > lum2
+        ? (lum2 + 0.05) / (lum1 + 0.05)
+        : (lum1 + 0.05) / (lum2 + 0.05);
+}
+export function handleStringColor(colorString, returnType = "rgb") {
+    // if it's a css variable
+    if (colorString.includes("--")) {
+        colorString = colorString.replace(/var\(|\)/g, ""); // grab just the variable name
+        const cssVarHydrated = getComputedStyle(document.documentElement)
+            .getPropertyValue(colorString)
+            .trim();
+        return handleStringColor(cssVarHydrated, returnType);
+    }
+    // if it has spaces, it's an rgb string
+    if (colorString.includes(" ")) {
+        const rgb = destringRgb(colorString);
+        return returnType === "hex" ? rgbToHex(rgb.r, rgb.g, rgb.b) : rgb;
+    }
+    // if it's a hex string
+    if (colorString.includes("#")) {
+        const rgb = hexToRgb(colorString);
+        if (!rgb)
+            return "(invalid)";
+        return returnType === "hex" ? colorString : rgb;
+    }
+    return colorString;
+}
+function cssColorToHex(colorString) {
+    if (colorString.includes("#"))
+        return colorString;
+    if (colorString.includes("rgb")) {
+        const [r, g, b] = colorString
+            .replace("rgb(", "")
+            .replace(")", "")
+            .split(",")
+            .map((x) => x.trim());
+        return rgbToHex(Number(r), Number(g), Number(b));
+    }
+    const hex = colorNameToHex(colorString);
+    if (hex)
+        return hex;
+    return "#000000";
+}
+export function destringRgb(rgbString) {
+    const rgb = rgbString.match(/(\d+),?\s*(\d+),?\s*(\d+)/); // matches "255, 255, 255" and "255 255 255"
+    if (!rgb)
+        throw new Error("Invalid RGB string!");
+    return {
+        r: parseInt(rgb[1], 10),
+        g: parseInt(rgb[2], 10),
+        b: parseInt(rgb[3], 10),
+    };
+}
+export function generateA11yOnColor(hex) {
+    const black = calculateRatio(hex, "#000000");
+    const white = calculateRatio(hex, "#FFFFFF");
+    return black < white ? "0 0 0" : "255 255 255";
+}
+export function generatePalette(baseColor) {
+    const hexValidation = new RegExp(/^#[0-9a-f]{6}$/i);
+    if (!hexValidation.test(baseColor))
+        baseColor = "#CCCCCC";
+    const hex500 = `#${baseColor}`.replace("##", "#");
+    const response = {
+        500: {
+            hex: hex500,
+            rgb: hexToTailwindRgbString(hex500),
+            on: generateA11yOnColor(hex500),
+        },
+    };
+    const intensityMap = {
+        50: 0.85,
+        100: 0.8,
+        200: 0.75,
+        300: 0.6,
+        400: 0.3,
+        600: 0.9,
+        700: 0.75,
+        800: 0.6,
+        900: 0.49,
+    };
+    [50, 100, 200, 300, 400].forEach((level) => {
+        const hex = lighten(baseColor, intensityMap[level]);
+        response[level] = {
+            hex,
+            rgb: hexToTailwindRgbString(hex),
+            on: generateA11yOnColor(hex),
+        };
+    });
+    [600, 700, 800, 900].forEach((level) => {
+        const hex = darken(baseColor, intensityMap[level]);
+        response[level] = {
+            hex,
+            rgb: hexToTailwindRgbString(hex),
+            on: generateA11yOnColor(hex),
+        };
+    });
+    return response;
+}
+function preprocessGfcThemeBlock(code) {
+    // Generate map of defined css variables
+    const cssVariableMap = {};
+    const cssVariableRegex = /--([a-z0-9-]+):\s*(.*?);/gi;
+    let match;
+    while ((match = cssVariableRegex.exec(code))) {
+        cssVariableMap[match[1]] = {
+            hex: cssColorToHex(match[2]),
+            match: match[0],
+        };
+    }
+    // Generate palette for missing color variables
+    const paletteNames = [
+        "primary",
+        "secondary",
+        "tertiary",
+        "success",
+        "warning",
+        "error",
+        "surface",
+    ];
+    for (const paletteName of paletteNames) {
+        const paletteVariableName = `color-${paletteName}`;
+        if (!cssVariableMap[paletteVariableName])
+            continue;
+        const palette = generatePalette(cssVariableMap[paletteVariableName].hex);
+        let replacement = "";
+        if (!cssVariableMap[`on-${paletteName}`]) {
+            replacement += `--on-${paletteName}: ${palette["500"].on};\n`;
+        }
+        for (const [level, color] of Object.entries(palette)) {
+            const variableName = `${paletteVariableName}-${level}`;
+            if (!cssVariableMap[variableName]) {
+                replacement += `--${variableName}: ${color.hex};\n`;
+            }
+        }
+        code = code.replace(cssVariableMap[paletteVariableName].match, replacement);
+    }
+    // Replace hex values to rgb tuples for skeleton system
+    code = revertReplaceForColorPickers(code);
+    return code;
+}
+function preprocessDaisyThemeBlock(code) {
+    const variableRegex = /--(p|pc|b1|bc|b2|er|erc|su|suc|s|sc|a|ac):\s*(.*?);/gi;
+    return code.replace(variableRegex, (_, name, value) => {
+        try {
+            const oklch = new Color(value).to("oklch");
+            const [l, c, h] = oklch.coords;
+            const lStr = (l * 100).toFixed(1);
+            const cStr = c.toFixed(3);
+            const hStr = (h || 0).toFixed(1); // h can be NaN for achromatic colors
+            return `--${name}: ${lStr}% ${cStr} ${hStr};`;
+        }
+        catch (e) {
+            // unable to parse color
+            return `--${name}: ${value};`;
+        }
+    });
+}
+export function preprocessStyle(code) {
+    // Find and replace [data-theme] block contents
+    const themeBlockRegex = /\[data-theme=(?:"|')?(gfc|gfc-theme|mac-theme|consensus-theme|daisy-light|daisy-dark)(?:"|')?\]\s*{([\s\S]*?)}/gi;
+    return code.replace(themeBlockRegex, (_, theme, block) => {
+        switch (theme) {
+            case "gfc":
+            case "gfc-theme":
+            case "mac-theme":
+            case "consensus-theme":
+                return `[data-theme="${theme}"] {${preprocessGfcThemeBlock(block)}}`;
+            case "daisy-light":
+                return `[data-theme="light"] {${preprocessDaisyThemeBlock(block)}}`;
+            case "daisy-dark":
+                return `[data-theme="dark"] {${preprocessDaisyThemeBlock(block)}}`;
+        }
+    });
+}

package/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "@kokimoki/kit",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc"
+  },
+  "author": "Loquiz OÜ",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@types/colornames": "^1.1.4",
+    "vite": "^5.4.8"
+  },
+  "dependencies": {
+    "bson-objectid": "^2.0.4",
+    "colorjs.io": "^0.5.2",
+    "colornames": "^1.1.1"
+  }
+}