@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/colorConverter/index.js

@@ -0,0 +1,497 @@
+import { baseStore } from "../baseStore";
+import { byPath } from "../byPath";
+
+const getThemeSafe = () => {
+    try {
+        return baseStore?.globalData?.get?.()?.theme || {};
+    } catch {
+        return {};
+    }
+};
+
+const resolveThemeToken = (input, depth = 0) => {
+    if (typeof input !== "string") return input;
+    if (depth > 5) return input;
+
+    const key = input.trim();
+    if (!key) return input;
+
+    const theme = getThemeSafe();
+    if (!theme || typeof theme !== "object") return input;
+
+    const pathMatch = byPath.get(theme, key);
+    const directMatch = theme?.[key];
+    const resolved = pathMatch ?? directMatch;
+
+    if (resolved == null) return input;
+    if (typeof resolved === "string" && resolved !== key) {
+        return resolveThemeToken(resolved, depth + 1);
+    }
+
+    return resolved;
+};
+
+export const colorConverter = (colorInput) => {
+    colorInput = resolveThemeToken(colorInput);
+
+
+    const hexToHexA = (color) => {
+        if (typeof color !== "string") return "#00000000";
+        color = color.trim();
+        if (color.startsWith("#")) color = color.slice(1);
+
+        if (color.length === 3) {
+            color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+        } else if (color.length === 4) {
+            color =
+                color[0] +
+                color[0] +
+                color[1] +
+                color[1] +
+                color[2] +
+                color[2] +
+                color[3] +
+                color[3];
+        }
+
+        if (color.length === 6) color += "ff";
+        color = color.padStart(8, "0");
+
+        return "#" + color.toLowerCase();
+    };
+
+
+
+    const cssColorToNormalized = (input) => {
+        if (typeof input !== "string") return null;
+        if (typeof document === "undefined") return null;
+
+        const s = input.trim();
+        if (!s) return null;
+
+
+        const lower = s.toLowerCase();
+        if (
+            lower.startsWith("#") ||
+            lower.startsWith("rgb(") ||
+            lower.startsWith("rgba(") ||
+            lower.startsWith("hsl(") ||
+            lower.startsWith("hsla(") ||
+            lower.startsWith("hsb(") ||
+            lower.startsWith("hsba(")
+        ) {
+            return null;
+        }
+
+        try {
+            const canvas = document.createElement("canvas");
+            canvas.width = canvas.height = 1;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) return null;
+
+
+            ctx.fillStyle = "#000";
+            ctx.fillStyle = s;
+
+
+            if (ctx.fillStyle === "#000000" && lower !== "black") return null;
+
+
+            return ctx.fillStyle;
+        } catch {
+            return null;
+        }
+    };
+
+    const sRGBtoLinearRGB = (c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+
+    const hslaToRgba = (h, s, l, a) => {
+        h = ((h % 360) + 360) % 360;
+        h /= 360;
+        s /= 100;
+        l /= 100;
+
+        const hueToRgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        } else {
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hueToRgb(p, q, h + 1 / 3);
+            g = hueToRgb(p, q, h);
+            b = hueToRgb(p, q, h - 1 / 3);
+        }
+
+        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a];
+    };
+
+    const rgbaToHsla = (r, g, b, a) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const d = max - min;
+
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+
+        if (d !== 0) {
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h *= 60;
+        }
+
+        return [Math.round(h), Math.round(s * 100), Math.round(l * 100), a];
+    };
+
+    const rgbaToHsba = (r, g, b, a) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const d = max - min;
+
+        let h = 0;
+        const v = max;
+        const s = max === 0 ? 0 : d / max;
+
+        if (d !== 0) {
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h *= 60;
+        }
+
+        return [Math.round(h), Math.round(s * 100), Math.round(v * 100), a];
+    };
+
+    const hsbaToRgba = (h, s, v, a) => {
+        h = ((h % 360) + 360) % 360;
+        s /= 100;
+        v /= 100;
+
+        const k = (n) => (n + h / 60) % 6;
+        const f = (n) => v * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
+
+        return [Math.round(255 * f(5)), Math.round(255 * f(3)), Math.round(255 * f(1)), a];
+    };
+
+    const clamp01 = (x) => Math.min(1, Math.max(0, x));
+
+    const parseRgbLike = (str) => {
+        const s = String(str).trim().toLowerCase();
+
+        const isRgba = s.startsWith("rgba");
+        const isRgb = s.startsWith("rgb(") || isRgba;
+        if (!isRgb) return null;
+
+        const inside = s.slice(s.indexOf("(") + 1, s.lastIndexOf(")")).trim();
+        const [left, right] = inside.split("/").map((x) => x && x.trim());
+
+        const parts = left.split(/[\s,]+/).filter(Boolean);
+        if (parts.length < 3) return null;
+
+        const r = parseFloat(parts[0]);
+        const g = parseFloat(parts[1]);
+        const b = parseFloat(parts[2]);
+
+        let a = 1;
+        if (right != null) a = parseFloat(right);
+        else if (isRgba && parts[3] != null) a = parseFloat(parts[3]);
+
+        if ([r, g, b, a].some((x) => Number.isNaN(x))) return null;
+
+        return [r, g, b, clamp01(a)];
+    };
+
+    const parseHslLike = (str) => {
+        const s = String(str).trim().toLowerCase();
+        const isHsla = s.startsWith("hsla");
+        const isHsl = s.startsWith("hsl(") || isHsla;
+        if (!isHsl) return null;
+
+        const inside = s.slice(s.indexOf("(") + 1, s.lastIndexOf(")")).trim();
+        const [left, right] = inside.split("/").map((x) => x && x.trim());
+        const parts = left.split(/[\s,]+/).filter(Boolean);
+
+        if (parts.length < 3) return null;
+
+        const h = parseFloat(parts[0]);
+        const sPerc = parseFloat(String(parts[1]).replace("%", ""));
+        const lPerc = parseFloat(String(parts[2]).replace("%", ""));
+
+        let a = 1;
+        if (right != null) a = parseFloat(right);
+        else if (isHsla && parts[3] != null) a = parseFloat(parts[3]);
+
+        if ([h, sPerc, lPerc, a].some((x) => Number.isNaN(x))) return null;
+
+        return [h, sPerc, lPerc, clamp01(a)];
+    };
+
+    const parseHsbLike = (str) => {
+        const s = String(str).trim().toLowerCase();
+        const isHsba = s.startsWith("hsba");
+        const isHsb = s.startsWith("hsb(") || isHsba;
+        if (!isHsb) return null;
+
+        const inside = s.slice(s.indexOf("(") + 1, s.lastIndexOf(")")).trim();
+        const [left, right] = inside.split("/").map((x) => x && x.trim());
+        const parts = left.split(/[\s,]+/).filter(Boolean);
+
+        if (parts.length < 3) return null;
+
+        const h = parseFloat(parts[0]);
+        const sPerc = parseFloat(String(parts[1]).replace("%", ""));
+        const bPerc = parseFloat(String(parts[2]).replace("%", ""));
+
+        let a = 1;
+        if (right != null) a = parseFloat(right);
+        else if (isHsba && parts[3] != null) a = parseFloat(parts[3]);
+
+        if ([h, sPerc, bPerc, a].some((x) => Number.isNaN(x))) return null;
+
+        return [h, sPerc, bPerc, clamp01(a)];
+    };
+
+
+    if (typeof colorInput === "string") {
+        const value = colorInput.trim();
+        if (!value) return {};
+
+        const normalized = cssColorToNormalized(value);
+        const lower = value.toLowerCase();
+        const isHexLike = /^#?[0-9a-f]{3,8}$/i.test(value);
+        if (normalized) {
+
+            if (normalized.startsWith("#")) colorInput = { hex8: hexToHexA(normalized) };
+            else colorInput = { rgbaString: normalized };
+        } else if (lower.startsWith("rgba(")) {
+            colorInput = { rgbaString: value };
+        } else if (lower.startsWith("rgb(")) {
+            colorInput = { rgbString: value };
+        } else if (lower.startsWith("hsla(")) {
+            colorInput = { hslaString: value };
+        } else if (lower.startsWith("hsl(")) {
+            colorInput = { hslString: value };
+        } else if (lower.startsWith("hsba(")) {
+            colorInput = { hsbaString: value };
+        } else if (lower.startsWith("hsb(")) {
+            colorInput = { hsbString: value };
+        } else if (isHexLike) {
+            colorInput = { hex8: hexToHexA(value) };
+        } else {
+            return {};
+        }
+    }
+
+    const {
+        hex3: inputhex3,
+        hex4: inputhex4,
+        hex6: inputhex6,
+        hex8: inputhex8,
+        rgbArray: inputrgbArray,
+        rgbString: inputrgbString,
+        rgbaArray: inputrgbaArray,
+        rgbaString: inputrgbaString,
+        hsbArray: inputhsbArray,
+        hsbString: inputhsbString,
+        hsbaArray: inputhsbaArray,
+        hsbaString: inputhsbaString,
+        hslArray: inputhslArray,
+        hslString: inputhslString,
+        hslaArray: inputhslaArray,
+        hslaString: inputhslaString,
+        alphaPerc: inputAlphaPerc,
+        alpha: inputAlpha,
+    } = colorInput || {};
+
+    const alpha = inputAlphaPerc != null ? inputAlphaPerc / 100 : (inputAlpha ?? 1);
+
+    let rgba;
+
+    if (inputhex3) {
+        const hex = inputhex3.replace("#", "");
+        rgba = [
+            parseInt(hex[0] + hex[0], 16),
+            parseInt(hex[1] + hex[1], 16),
+            parseInt(hex[2] + hex[2], 16),
+            clamp01(alpha),
+        ];
+    } else if (inputhex4) {
+        const hex = inputhex4.replace("#", "");
+        rgba = [
+            parseInt(hex[0] + hex[0], 16),
+            parseInt(hex[1] + hex[1], 16),
+            parseInt(hex[2] + hex[2], 16),
+            clamp01(parseInt(hex[3] + hex[3], 16) / 255),
+        ];
+    } else if (inputhex6) {
+        const hex = inputhex6.replace("#", "");
+        rgba = [
+            parseInt(hex.slice(0, 2), 16),
+            parseInt(hex.slice(2, 4), 16),
+            parseInt(hex.slice(4, 6), 16),
+            clamp01(alpha),
+        ];
+    } else if (inputhex8) {
+        const hex = inputhex8.replace("#", "");
+        rgba = [
+            parseInt(hex.slice(0, 2), 16),
+            parseInt(hex.slice(2, 4), 16),
+            parseInt(hex.slice(4, 6), 16),
+            clamp01(parseInt(hex.slice(6, 8), 16) / 255),
+        ];
+    } else if (inputrgbArray) {
+        rgba = [...inputrgbArray, clamp01(alpha)];
+    } else if (inputrgbString) {
+        const parsed = parseRgbLike(inputrgbString);
+        if (!parsed) return {};
+        rgba = [parsed[0], parsed[1], parsed[2], clamp01(alpha)];
+    } else if (inputrgbaArray) {
+        rgba = [...inputrgbaArray];
+        rgba[3] = clamp01(rgba[3] ?? 1);
+    } else if (inputrgbaString) {
+        const parsed = parseRgbLike(inputrgbaString);
+        if (!parsed) return {};
+        rgba = parsed;
+    } else if (inputhsbArray) {
+        rgba = hsbaToRgba(...inputhsbArray, clamp01(alpha));
+    } else if (inputhsbString) {
+        const parsed = parseHsbLike(inputhsbString);
+        if (!parsed) return {};
+        rgba = hsbaToRgba(parsed[0], parsed[1], parsed[2], clamp01(alpha));
+    } else if (inputhsbaArray) {
+        rgba = hsbaToRgba(...inputhsbaArray);
+    } else if (inputhsbaString) {
+        const parsed = parseHsbLike(inputhsbaString);
+        if (!parsed) return {};
+        rgba = hsbaToRgba(parsed[0], parsed[1], parsed[2], parsed[3]);
+    } else if (inputhslArray) {
+        rgba = hslaToRgba(...inputhslArray, clamp01(alpha));
+    } else if (inputhslString) {
+        const parsed = parseHslLike(inputhslString);
+        if (!parsed) return {};
+        rgba = hslaToRgba(parsed[0], parsed[1], parsed[2], clamp01(alpha));
+    } else if (inputhslaArray) {
+        rgba = hslaToRgba(...inputhslaArray);
+    } else if (inputhslaString) {
+        const parsed = parseHslLike(inputhslaString);
+        if (!parsed) return {};
+        rgba = hslaToRgba(parsed[0], parsed[1], parsed[2], parsed[3]);
+    } else {
+        return {};
+    }
+
+
+    rgba = [
+        Math.round(Math.min(255, Math.max(0, rgba[0]))),
+        Math.round(Math.min(255, Math.max(0, rgba[1]))),
+        Math.round(Math.min(255, Math.max(0, rgba[2]))),
+        clamp01(rgba[3]),
+    ];
+    if (![rgba[0], rgba[1], rgba[2], rgba[3]].every(Number.isFinite)) return {};
+
+    const hex6 =
+        "#" +
+        rgba
+            .slice(0, 3)
+            .map((x) => x.toString(16).padStart(2, "0"))
+            .join("");
+    const hex8 =
+        "#" +
+        rgba
+            .slice(0, 3)
+            .map((x) => x.toString(16).padStart(2, "0"))
+            .join("") +
+        Math.round(rgba[3] * 255)
+            .toString(16)
+            .padStart(2, "0");
+
+    const rgbArray = rgba.slice(0, 3);
+    const rgbString = `rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`;
+    const rgbaArray = rgba;
+    const rgbaString = `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
+
+    const hsbaArray = rgbaToHsba(...rgbaArray);
+    const hsbArray = hsbaArray.slice(0, 3);
+    const hsbString = `hsb(${hsbArray[0]}, ${hsbArray[1]}%, ${hsbArray[2]}%)`;
+    const hsbaString = `hsba(${hsbaArray[0]}, ${hsbaArray[1]}%, ${hsbaArray[2]}% / ${hsbaArray[3]})`;
+
+    const hslaArray = rgbaToHsla(...rgbaArray);
+    const hslArray = hslaArray.slice(0, 3);
+    const hslString = `hsl(${hslArray[0]}, ${hslArray[1]}%, ${hslArray[2]}%)`;
+    const hslaString = `hsla(${hslaArray[0]}, ${hslaArray[1]}%, ${hslaArray[2]}% / ${hslaArray[3]})`;
+
+    const linearRgbaArray = [
+        sRGBtoLinearRGB(rgba[0] / 255),
+        sRGBtoLinearRGB(rgba[1] / 255),
+        sRGBtoLinearRGB(rgba[2] / 255),
+        rgba[3],
+    ];
+    const linearRgbaArrayRounded = [
+        Number(linearRgbaArray[0].toFixed(2)),
+        Number(linearRgbaArray[1].toFixed(2)),
+        Number(linearRgbaArray[2].toFixed(2)),
+        Number(linearRgbaArray[3].toFixed(2)),
+    ];
+
+    const luminance = Number(
+        (
+            0.2126 * linearRgbaArray[0] +
+            0.7152 * linearRgbaArray[1] +
+            0.0722 * linearRgbaArray[2]
+        ).toFixed(5),
+    );
+
+    return {
+        hex6,
+        hex8,
+        rgbArray,
+        rgbString,
+        rgbaArray,
+        rgbaString,
+        hsbArray,
+        hsbString,
+        hsbaArray,
+        hsbaString,
+        hslArray,
+        hslString,
+        hslaArray,
+        hslaString,
+        luminance,
+        isLight: luminance >= 0.5,
+        isDark: luminance < 0.5,
+        linearRgbaArray: linearRgbaArrayRounded,
+    };
+};

package/src/libs/colorFind/_dS.jsx

@@ -0,0 +1,115 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { colorFind } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const { input, output, set } = baseStore.useLocal({
+        input: "primary",
+        output: "hex6",
+    });
+
+    const result = colorFind(input, { output });
+
+    return (
+        <Ds.page
+            title="colorFind()"
+            releasedOn="1.0.0"
+            description={`Resolves input color strings into hex output using theme tokens, theme paths, and raw color formats.
+
+You can use colorFind via direct import from base, or via the theme helper in styled usage (theme.colorFind).`}
+        >
+            <Ds.block
+                title={{ tr: "Etkileşimli", en: "Interactive" }}
+                code={`import { colorFind } from "${SYS.basePath}";
+
+                       colorFind("primary");
+                       colorFind("greys.shade50");
+                       colorFind("rgba(0,0,0,0.5)", { output: "hex8" });
+                       colorFind("red");
+                       colorFind("#07f", { output: "hex8" });`}
+                example={
+                    <Flex.column gap={12} full>
+                        <Flex gap={10}>
+                            <Flex.column gap={4}>
+                                <Typo.span>Input:</Typo.span>
+                                <input
+                                    type="text"
+                                    value={input}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.input = e.target.value;
+                                        })
+                                    }
+                                    style={{ width: 220 }}
+                                />
+                            </Flex.column>
+
+                            <Flex.column gap={4}>
+                                <Typo.span>Output mode:</Typo.span>
+                                <select
+                                    value={output}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.output = e.target.value;
+                                        })
+                                    }
+                                >
+                                    <option value="hex6">hex6</option>
+                                    <option value="hex8">hex8</option>
+                                </select>
+                            </Flex.column>
+
+                            {result && (
+                                <Flex.column gap={4}>
+                                    <Typo.span>Preview:</Typo.span>
+                                    <div
+                                        style={{
+                                            backgroundColor: result,
+                                            width: 30,
+                                            height: 30,
+                                            borderRadius: 6,
+                                            border: "1px solid #ddd",
+                                        }}
+                                    />
+                                </Flex.column>
+                            )}
+                        </Flex>
+                        <Ds.output directValue={{ input, output, result }} />
+                    </Flex.column>
+                }
+            />
+
+            <Ds.api
+                args='const hex = colorFind(input, { output, theme });'
+                props={{
+                    input: {
+                        description:
+                            "Color input as token/path/raw css color (e.g. primary, greys.shade50, red, rgba(...), #07f).",
+                        type: "string",
+                        required: true,
+                    },
+                    output: {
+                        description: { tr: "Çözümlenen renk için çıktı formatı.", en: "Output format for resolved color." },
+                        type: '"hex6" | "hex8"',
+                        defaultValue: '"hex6"',
+                    },
+                    theme: {
+                        description: { tr: "Arama için isteğe bağlı theme override nesnesi.", en: "Optional theme override object for lookup." },
+                        type: "object",
+                    },
+                }}
+                returnProps={{
+                    hex: {
+                        description: { tr: "Çözümlenen hex renk string'i; bulunamazsa undefined.", en: "Resolved hex color string, or undefined when not found." },
+                        type: "string | undefined",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/colorFind/index.js

@@ -0,0 +1,70 @@
+import { baseStore } from "../baseStore";
+import { byPath } from "../byPath";
+import { colorConverter } from "../colorConverter";
+
+const getTheme = () => {
+    try {
+        return baseStore.globalData.get?.()?.theme || {};
+    } catch {
+        return {};
+    }
+};
+
+const toHex = (value, mode = "hex6") => {
+    try {
+        const c = colorConverter(value);
+        if (!c) return undefined;
+        const candidate = mode === "hex8" ? c.hex8 : c.hex6;
+        if (typeof candidate !== "string") return undefined;
+        const isValidHex = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(candidate);
+        return isValidHex ? candidate : undefined;
+    } catch {
+        return undefined;
+    }
+};
+
+export const colorFind = (input, options = {}) => {
+    const { theme: themeOverride, output = "hex6", _depth = 0 } = options;
+    if (typeof input !== "string") return undefined;
+    if (_depth > 6) return undefined;
+
+    const globalTheme = getTheme();
+    const theme = {
+        ...globalTheme,
+        ...(themeOverride || {}),
+    };
+    const key = input.trim();
+    if (!key) return undefined;
+
+    const tryThemeLookup = (t) => {
+        if (!t || typeof t !== "object") return undefined;
+        const fromPath = byPath.get(t, key);
+        if (typeof fromPath === "string") {
+            const hex = toHex(fromPath, output);
+            if (hex) return hex;
+            return colorFind(fromPath, { theme: t, output, _depth: _depth + 1 });
+        }
+
+        const fromKey = t?.[key];
+        if (typeof fromKey === "string") {
+            const hex = toHex(fromKey, output);
+            if (hex) return hex;
+            return colorFind(fromKey, { theme: t, output, _depth: _depth + 1 });
+        }
+
+        return undefined;
+    };
+
+    const fromMergedTheme = tryThemeLookup(theme);
+    if (fromMergedTheme) return fromMergedTheme;
+
+
+    const fromGlobalTheme = tryThemeLookup(globalTheme);
+    if (fromGlobalTheme) return fromGlobalTheme;
+
+
+    const directHex = toHex(key, output);
+    if (directHex) return directHex;
+
+    return undefined;
+};