@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/Icon/index.jsx

@@ -0,0 +1,285 @@
+import { useEffect, useMemo, useState } from "react";
+import { getBuiltInIcon, loadBuiltInIcon } from "./icons";
+import { getBuiltInFlag, loadBuiltInFlag } from "../Flag/flags";
+import { baseStore } from "../baseStore";
+import {
+    createIconMeta,
+    normalizeIconsLibrary,
+    resolveIconInput,
+    resolveThemeColor,
+} from "./tools/iconMeta";
+import { IconLayer } from "./tools/IconLayer";
+import { PopTipWrapper } from "./tools/PopTipWrapper";
+import { Root } from "./tools/styled";
+import { resolveSize, resolveVisualScale } from "./tools/visualScale";
+import { Visibility } from "../Visibility";
+
+export const Icon = ({
+    icon,
+    color,
+    bgColor,
+    width = 14,
+    size,
+    w,
+    hoverIcon: hoverIconProp,
+    hoverColor,
+    hoverBgColor,
+    hoverScale,
+    hoverWidth,
+    hoverW,
+    hoverSize,
+    activeIcon: activeIconProp,
+    activeColor,
+    activeBgColor,
+    activeScale,
+    activeWidth,
+    activeW,
+    activeSize,
+    pendingIcon: pendingIconProp,
+    pendingColor,
+    pendingBgColor,
+    pendingScale,
+    pendingWidth,
+    pendingW,
+    pendingSize,
+    popTipProps = {},
+    hoverManually = false,
+    activeManually = false,
+    clickEffectManually,
+    pendingManually = false,
+    disableScaleEffect = false,
+    disablePulseEffect = false,
+    flat = false,
+    isFlag = false,
+}) => {
+    const [iconsLibraryRaw, theme] = baseStore.useGlobal((s) => [s._iconsLibrary, s.theme]);
+    const [, setDefinitionVersion] = useState(0);
+
+    const { isSelfHover, set } = baseStore.useLocal({
+        isSelfHover: false,
+    });
+
+    const iconsLibrary = useMemo(() => normalizeIconsLibrary(iconsLibraryRaw), [iconsLibraryRaw]);
+
+    const pendingState = !!pendingManually;
+    const clickEffectControlled = clickEffectManually !== undefined;
+    const activeFromClickEffect = clickEffectControlled ? !!clickEffectManually : false;
+    const activeState = (!!activeManually || activeFromClickEffect) && !pendingState;
+    const hoverState = !!(hoverManually || isSelfHover) && !activeState && !pendingState;
+
+    const hoverGlyph = hoverIconProp || null;
+    const activeGlyph = activeIconProp || null;
+    const pendingGlyph = pendingIconProp || null;
+
+    const glyphsToLoad = useMemo(
+        () => [icon, hoverGlyph, activeGlyph, pendingGlyph].filter((glyph) => typeof glyph === "string"),
+        [icon, hoverGlyph, activeGlyph, pendingGlyph],
+    );
+    const glyphsKey = glyphsToLoad.join("|");
+
+    useEffect(() => {
+        const load = isFlag ? loadBuiltInFlag : loadBuiltInIcon;
+        let cancelled = false;
+
+        Promise.all(glyphsToLoad.map((glyph) => load(glyph))).then(() => {
+            if (!cancelled) setDefinitionVersion((version) => version + 1);
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [glyphsKey, glyphsToLoad, isFlag]);
+
+    const resolveDefinition = (glyph) => {
+        const customDefinition = isFlag ? null : resolveIconInput(glyph, iconsLibrary);
+        if (customDefinition) return customDefinition;
+        if (typeof glyph !== "string") return resolveIconInput(glyph, {});
+        return isFlag ? getBuiltInFlag(glyph) : getBuiltInIcon(glyph);
+    };
+
+    const baseDefinition = resolveDefinition(icon);
+    const hoverDefinition = resolveDefinition(hoverGlyph);
+    const activeDefinition = resolveDefinition(activeGlyph);
+    const pendingDefinition = resolveDefinition(pendingGlyph);
+
+    const baseMeta = useMemo(() => createIconMeta(baseDefinition), [baseDefinition]);
+    const hoverMeta = useMemo(() => createIconMeta(hoverDefinition), [hoverDefinition]);
+    const activeMeta = useMemo(
+        () => createIconMeta(activeDefinition),
+        [activeDefinition],
+    );
+    const pendingMeta = useMemo(
+        () => createIconMeta(pendingDefinition),
+        [pendingDefinition],
+    );
+
+    const finalColorRaw = pendingState
+        ? pendingColor || color
+        : activeState
+          ? activeColor || color
+          : hoverState
+            ? hoverColor || color
+            : color;
+    const finalBgRaw = pendingState
+        ? pendingBgColor || activeBgColor || hoverBgColor || bgColor
+        : activeState
+          ? activeBgColor || hoverBgColor || bgColor
+          : hoverState
+            ? hoverBgColor || bgColor
+            : bgColor;
+
+    const finalColor = resolveThemeColor(theme, finalColorRaw);
+    const finalBg = resolveThemeColor(theme, finalBgRaw);
+    const baseSize = resolveSize(size, w, width);
+
+    const hoverScaleValue = resolveVisualScale({
+        explicitScale: hoverScale,
+        widthAlias: hoverWidth,
+        widthAliasShort: hoverW,
+        widthAliasSize: hoverSize,
+        baseSize,
+        fallback: 1,
+    });
+
+    const activeScaleValue = resolveVisualScale({
+        explicitScale: activeScale,
+        widthAlias: activeWidth,
+        widthAliasShort: activeW,
+        widthAliasSize: activeSize,
+        baseSize,
+        fallback: 1,
+    });
+
+    const pendingScaleValue = resolveVisualScale({
+        explicitScale: pendingScale,
+        widthAlias: pendingWidth,
+        widthAliasShort: pendingW,
+        widthAliasSize: pendingSize,
+        baseSize,
+        fallback: 1,
+    });
+
+    const finalScale = disableScaleEffect
+        ? 1
+        : pendingState
+          ? pendingScaleValue
+          : activeState
+            ? activeScaleValue
+            : hoverState
+              ? hoverScaleValue
+              : 1;
+
+    const shouldRenderHoverLayer = !!(hoverIconProp && hoverMeta);
+    const shouldRenderActiveLayer = !!(activeIconProp && activeMeta);
+    const shouldRenderPendingLayer = !!(pendingIconProp && pendingMeta);
+    const shouldUsePendingLayer = pendingState && shouldRenderPendingLayer;
+    const shouldUseHoverLayer = hoverState && shouldRenderHoverLayer;
+    const shouldUseActiveLayer = activeState && shouldRenderActiveLayer;
+    const showBaseLayer = !shouldUsePendingLayer && !shouldUseHoverLayer && !shouldUseActiveLayer;
+    const showHoverLayer = shouldUseHoverLayer;
+    const showActiveLayer = shouldUseActiveLayer;
+    const showPendingLayer = shouldUsePendingLayer;
+
+    const pulseEnabled = !disablePulseEffect;
+
+    if (!baseMeta) return null;
+
+    const flatBoxW = baseMeta.contentBounds?.width || baseMeta.viewW;
+    const flatBoxH = baseMeta.contentBounds?.height || baseMeta.viewH;
+    const viewLong = Math.max(flatBoxW, flatBoxH);
+    const flatRootWidth = flat ? baseSize * (flatBoxW / viewLong) : baseSize;
+
+    return (
+        <PopTipWrapper popTipProps={popTipProps}>
+            <Root
+                $size={baseSize}
+                $flat={flat}
+                $flatRootWidth={flatRootWidth}
+                $aspectW={flat ? flatBoxW : 1}
+                $aspectH={flat ? flatBoxH : 1}
+                onMouseEnter={() =>
+                    set((s) => {
+                        s.isSelfHover = true;
+                    })
+                }
+                onMouseLeave={() =>
+                    set((s) => {
+                        s.isSelfHover = false;
+                    })
+                }
+                style={{
+                    background: finalBg || "transparent",
+                    borderRadius: "999px",
+                    transition: "background 0.2s ease, background-color 0.2s ease, color 0.2s ease",
+                }}
+            >
+                <IconLayer
+                    meta={baseMeta}
+                    visible={showBaseLayer}
+                    fill={finalColor}
+                    scale={finalScale}
+                    spinPending={pendingState && showBaseLayer}
+                    isFlag={isFlag}
+                    disableOpticalScale={flat}
+                    trimToContentBounds={flat}
+                    enablePulse={
+                        pulseEnabled && activeState && !shouldRenderActiveLayer && !pendingState
+                    }
+                    isActive={activeState}
+                />
+
+                <Visibility.mount
+                    visible={shouldRenderHoverLayer}
+                    content={
+                        <IconLayer
+                            meta={hoverMeta}
+                            visible={showHoverLayer}
+                            fill={finalColor}
+                            scale={finalScale}
+                            isFlag={isFlag}
+                            disableOpticalScale={flat}
+                            trimToContentBounds={flat}
+                            enablePulse={false}
+                            isActive={false}
+                        />
+                    }
+                />
+
+                <Visibility.mount
+                    visible={shouldRenderActiveLayer}
+                    content={
+                        <IconLayer
+                            meta={activeMeta}
+                            visible={showActiveLayer}
+                            fill={finalColor}
+                            scale={finalScale}
+                            isFlag={isFlag}
+                            disableOpticalScale={flat}
+                            trimToContentBounds={flat}
+                            enablePulse={pulseEnabled && activeState}
+                            isActive={activeState}
+                        />
+                    }
+                />
+
+                <Visibility.mount
+                    visible={shouldRenderPendingLayer}
+                    content={
+                        <IconLayer
+                            meta={pendingMeta}
+                            visible={showPendingLayer}
+                            fill={finalColor}
+                            scale={finalScale}
+                            spinPending={showPendingLayer}
+                            isFlag={isFlag}
+                            disableOpticalScale={flat}
+                            trimToContentBounds={flat}
+                            enablePulse={false}
+                            isActive={false}
+                        />
+                    }
+                />
+            </Root>
+        </PopTipWrapper>
+    );
+};

package/src/libs/Icon/tools/IconLayer.jsx

@@ -0,0 +1,221 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { LayerSvg } from "./styled";
+
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+const scheduleFrame = (callback) => {
+    if (typeof requestAnimationFrame === "function") {
+        return { type: "frame", id: requestAnimationFrame(callback) };
+    }
+
+    return { type: "timeout", id: setTimeout(callback, 0) };
+};
+
+const cancelFrame = (frame) => {
+    if (!frame) return;
+
+    if (frame.type === "frame" && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(frame.id);
+        return;
+    }
+
+    clearTimeout(frame.id);
+};
+
+const getContentKey = (Content) => {
+    if (typeof Content === "string") return Content;
+    if (typeof Content === "function") return Content;
+    return Content ?? null;
+};
+
+const hashString = (value) => {
+    let hash = 0;
+
+    for (let index = 0; index < value.length; index += 1) {
+        hash = (hash * 31 + value.charCodeAt(index)) | 0;
+    }
+
+    return Math.abs(hash).toString(36);
+};
+
+const getMetaKey = (meta) => {
+    if (!meta) return null;
+
+    return [
+        meta.viewW,
+        meta.viewH,
+        meta.contentBounds?.minX,
+        meta.contentBounds?.minY,
+        meta.contentBounds?.width,
+        meta.contentBounds?.height,
+        getContentKey(meta.Content),
+    ];
+};
+
+const getMetaSignature = (meta) => {
+    if (!meta) return "none";
+
+    const contentKey = getContentKey(meta.Content);
+    const contentSignature =
+        typeof contentKey === "string"
+            ? hashString(contentKey)
+            : typeof contentKey === "function"
+              ? contentKey.name || "fn"
+              : String(contentKey);
+
+    return [
+        meta.viewW,
+        meta.viewH,
+        meta.contentBounds?.minX || 0,
+        meta.contentBounds?.minY || 0,
+        meta.contentBounds?.width || 0,
+        meta.contentBounds?.height || 0,
+        contentSignature,
+    ].join(":");
+};
+
+export const IconLayer = ({
+    meta,
+    visible,
+    fill,
+    scale = 1,
+    enablePulse,
+    isActive,
+    spinPending,
+    isFlag = false,
+    disableOpticalScale = false,
+    trimToContentBounds = false,
+}) => {
+    const metaKey = useMemo(() => getMetaKey(meta), [meta]);
+    const metaKeyRef = useRef(metaKey);
+    const metaRef = useRef(meta);
+    const frameRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const visibleRef = useRef(visible);
+    const [swap, setSwap] = useState({
+        previousMeta: null,
+        showCurrent: true,
+        showPrevious: false,
+    });
+
+    useIsoLayoutEffect(() => {
+        const previousKey = metaKeyRef.current;
+        const metaChanged =
+            previousKey &&
+            metaKey &&
+            previousKey.some((value, index) => value !== metaKey[index]);
+        const wasVisible = visibleRef.current;
+
+        cancelFrame(frameRef.current);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+        if (visible && metaChanged) {
+            setSwap({
+                previousMeta: metaRef.current,
+                showCurrent: false,
+                showPrevious: true,
+            });
+
+            frameRef.current = scheduleFrame(() => {
+                setSwap((current) => ({
+                    ...current,
+                    showCurrent: true,
+                    showPrevious: false,
+                }));
+            });
+
+            timeoutRef.current = setTimeout(() => {
+                setSwap((current) => ({
+                    ...current,
+                    previousMeta: null,
+                }));
+            }, 260);
+        } else if (!visible && wasVisible && metaChanged) {
+            setSwap({
+                previousMeta: null,
+                showCurrent: true,
+                showPrevious: false,
+            });
+        } else {
+            setSwap((current) =>
+                current.previousMeta
+                    ? current
+                    : { previousMeta: null, showCurrent: true, showPrevious: false },
+            );
+        }
+
+        metaKeyRef.current = metaKey;
+        metaRef.current = meta;
+        visibleRef.current = visible;
+
+        return () => {
+            cancelFrame(frameRef.current);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+    }, [meta, metaKey, visible]);
+
+    if (!meta) return null;
+
+    const renderLayer = (layerMeta, layerVisible, keyPrefix, isPrevious = false) => {
+        if (!layerMeta) return null;
+
+        const { Content, viewW, viewH, contentBounds, opticalScale, centerX, centerY } = layerMeta;
+        const resolvedOpticalScale = disableOpticalScale ? 1 : opticalScale;
+        const renderBounds = trimToContentBounds && contentBounds ? contentBounds : null;
+        const renderX = renderBounds?.minX || 0;
+        const renderY = renderBounds?.minY || 0;
+        const renderW = renderBounds?.width || viewW;
+        const renderH = renderBounds?.height || viewH;
+
+        const opticalTransform =
+            resolvedOpticalScale === 1
+                ? undefined
+                : `translate(${centerX} ${centerY}) scale(${resolvedOpticalScale}) translate(${-centerX} ${-centerY})`;
+
+        const content =
+            typeof Content === "string" ? (
+                isFlag && Content.startsWith("data:image/") ? (
+                    <image
+                        href={Content}
+                        xlinkHref={Content}
+                        x="0"
+                        y="0"
+                        width={viewW}
+                        height={viewH}
+                    />
+                ) : (
+                    <path d={Content} />
+                )
+            ) : Content ? (
+                <Content />
+            ) : null;
+
+        return (
+            <LayerSvg
+                key={`${keyPrefix}-${getMetaSignature(layerMeta)}`}
+                $visible={layerVisible}
+                $scale={scale}
+                $spin={!isPrevious && spinPending}
+                $enablePulse={!isPrevious && enablePulse}
+                $isActive={!isPrevious && isActive}
+                $fill={fill}
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+                viewBox={`${renderX} ${renderY} ${renderW} ${renderH}`}
+                preserveAspectRatio="xMidYMid meet"
+                aria-hidden="true"
+                focusable="false"
+            >
+                {opticalTransform ? <g transform={opticalTransform}>{content}</g> : content}
+            </LayerSvg>
+        );
+    };
+
+    return (
+        <span style={{ display: "contents" }}>
+            {renderLayer(swap.previousMeta, swap.showPrevious, "previous", true)}
+            {renderLayer(meta, visible && swap.showCurrent, "current")}
+        </span>
+    );
+};

package/src/libs/Icon/tools/PopTipWrapper.jsx

@@ -0,0 +1,6 @@
+import { PopTip } from "../../PopTip";
+
+export const PopTipWrapper = ({ popTipProps, children }) => {
+    if (!popTipProps || !popTipProps.content) return children;
+    return <PopTip {...popTipProps}>{children}</PopTip>;
+};

package/src/libs/Icon/tools/iconMeta.js

@@ -0,0 +1,65 @@
+import { colorFind } from "../../colorFind";
+import { getPathBounds } from "./pathBounds";
+import { isObject, isValidIconArray } from "./validators";
+
+export const resolveThemeColor = (theme, value) => {
+    if (!value) return value;
+    if (typeof value !== "string") return value;
+    return colorFind(value, { theme, output: "hex8" }) ?? value;
+};
+
+export const normalizeIconsLibrary = (value) => {
+    if (!isObject(value)) return {};
+    return value;
+};
+
+export const resolveIconInput = (iconInput, allIcons) => {
+    if (!iconInput) return null;
+
+    if (typeof iconInput === "string") {
+        const fromLibrary = allIcons?.[iconInput];
+        return isValidIconArray(fromLibrary) ? fromLibrary : null;
+    }
+
+    return isValidIconArray(iconInput) ? iconInput : null;
+};
+
+const clampBoundsToViewBox = (bounds, viewW, viewH) => {
+    if (!bounds) return null;
+
+    const minX = Math.max(0, bounds.minX);
+    const minY = Math.max(0, bounds.minY);
+    const maxX = Math.min(viewW, bounds.minX + bounds.width);
+    const maxY = Math.min(viewH, bounds.minY + bounds.height);
+    const width = maxX - minX;
+    const height = maxY - minY;
+
+    if (width <= 0 || height <= 0) return null;
+
+    return { minX, minY, width, height };
+};
+
+export const createIconMeta = (file) => {
+    if (!isValidIconArray(file)) return null;
+    if (!file) return null;
+
+    const [viewBox, Content] = file;
+    const [viewW, viewH] = viewBox.split(/\s+/).map(Number);
+
+    if (!viewW || !viewH) return null;
+
+    const contentBounds = clampBoundsToViewBox(getPathBounds(Content), viewW, viewH);
+    const ratio = viewW / viewH;
+    const stretch = Math.max(ratio, 1 / ratio);
+    const opticalScale = Math.max(0.84, Math.min(1, 1 / Math.pow(stretch, 0.18)));
+
+    return {
+        Content,
+        viewW,
+        viewH,
+        contentBounds,
+        opticalScale,
+        centerX: viewW / 2,
+        centerY: viewH / 2,
+    };
+};