@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/FloatingUi/tools/useVars.js

@@ -0,0 +1,450 @@
+import { useRef, useEffect, useLayoutEffect, useMemo, useState, useCallback } from "react";
+import { baseStore } from "../../baseStore";
+import { useEventListener } from "../../useEventListener";
+import { delayedFunction } from "../../delayedFunction";
+import getPosition from "./getPosition";
+import { colorGet } from "../../colorGet";
+import { useExportData } from "helpers/useExportedData";
+import { useObserver } from "../../useObserver";
+import {
+    acquireFloatingMountHost,
+    ensureFloatingMountHost,
+    pickFloatingMountRoot,
+    releaseFloatingMountHost,
+} from "./floatingMountHost";
+import { generate4DirectionProps } from "../../Flex/tools/generateProps";
+import { generateRandom } from "../../generateRandom";
+import { cssNormalizeSize } from "../../cssNormalizeSize";
+
+const DEFAULT_FLOATING_PADDING = 10;
+
+const POP_OVER_TRIGGER_SELECTOR = "[data-floating-ui-pop-over-trigger]";
+
+const useVars = (p) => {
+    const {
+        open,
+        alignX: alignXFromUser,
+        alignY: alignYFromUser,
+        disableArrow,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        Variant,
+        bgColor,
+        color,
+        uniqueId,
+        enableEscaping: enableEscapingProp,
+        popOverOutsideDismiss: popOverOutsideDismissProp,
+        closeHandler: closeHandlerFromChildComponent,
+        exportData,
+        dismissWithoutAnimationRef,
+        resolveFloatingMount,
+        padding,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        maxWidth,
+        disableMultipleBlock = false,
+        popOverTriggerMarker = false,
+    } = p || {};
+
+    const enableEscaping = enableEscapingProp === true;
+    const popOverOutsideDismiss = popOverOutsideDismissProp === true;
+    const listenOutsidePointer = popOverOutsideDismiss;
+    const listenEscapeKey = enableEscaping;
+
+    const floatingExclusiveId = useMemo(
+        () => (uniqueId != null && uniqueId !== "" ? String(uniqueId) : generateRandom.text(16)),
+        [],
+    );
+
+    const {
+        isMounted,
+        set,
+        setByPath,
+        positionX,
+        positionY,
+        alignX,
+        alignY,
+        arrowOffset,
+        blockVisibility,
+        status,
+    } = baseStore.useLocal({
+        isMounted: false,
+        positionX: 0,
+        positionY: 0,
+        alignX: "center",
+        alignY: "top",
+        arrowOffset: null,
+        blockVisibility: false,
+        status: "closed",
+    });
+    const [referenceEl, setReferenceEl] = useState(null);
+    const [floatingEl, setFloatingEl] = useState(null);
+
+    const childrenRef = useRef(null);
+    const floatingRef = useRef(null);
+    const floatingMountHostRef = useRef(null);
+    const closeHandlerFromChildRef = useRef(closeHandlerFromChildComponent);
+
+    useEffect(() => {
+        closeHandlerFromChildRef.current = closeHandlerFromChildComponent;
+    }, [closeHandlerFromChildComponent]);
+
+    const setFloatingNode = useCallback((node) => {
+        floatingRef.current = node;
+        setFloatingEl(node);
+    }, []);
+
+    useEffect(() => {
+        setByPath("isMounted", true);
+    }, [setByPath]);
+
+    const setByPathRef = useRef(setByPath);
+    setByPathRef.current = setByPath;
+
+    const getPos = useCallback(() => {
+        if (status !== "opened") return;
+
+        getPosition({
+            childrenRef,
+            floatingRef,
+            set,
+            alignXFromUser,
+            alignYFromUser,
+            currentAlignX: alignX,
+            currentAlignY: alignY,
+            resolveFloatingMount,
+            floatingLayerEl: floatingMountHostRef.current,
+        });
+    }, [status, set, alignXFromUser, alignYFromUser, alignX, alignY, resolveFloatingMount]);
+
+    const delayMs = 500;
+    const delayedClose = useMemo(
+        () =>
+            delayedFunction(
+                () => {
+                    setByPathRef.current("status", "closed");
+                },
+                { delay: delayMs },
+            ),
+        [delayMs],
+    );
+
+    const delayedCloseRef = useRef(delayedClose);
+    delayedCloseRef.current = delayedClose;
+    const [popOverId, setGlobal] = baseStore.useGlobal((s) => [s.popOverId, s.set]);
+
+    const exclusiveBlocksOthers = !disableMultipleBlock;
+
+    const effectiveOpen = useMemo(() => {
+        if (!exclusiveBlocksOthers) return open;
+        return open && (popOverId == null || popOverId === floatingExclusiveId);
+    }, [open, exclusiveBlocksOthers, popOverId, floatingExclusiveId]);
+
+    const prevOpenForExclusiveRef = useRef(false);
+
+    useLayoutEffect(() => {
+        if (!exclusiveBlocksOthers) return;
+        if (!open || effectiveOpen) return;
+        if (!prevOpenForExclusiveRef.current) return;
+        closeHandlerFromChildRef.current?.({ instant: true });
+    }, [exclusiveBlocksOthers, open, effectiveOpen]);
+    useLayoutEffect(() => {
+        if (disableMultipleBlock) return;
+        const was = prevOpenForExclusiveRef.current;
+        prevOpenForExclusiveRef.current = open;
+        if (open && !was) {
+            setGlobal((s) => {
+                s.popOverId = floatingExclusiveId;
+            });
+        }
+        if (!open && was) {
+            setGlobal((s) => {
+                if (s.popOverId === floatingExclusiveId) s.popOverId = null;
+            });
+        }
+    }, [open, disableMultipleBlock, floatingExclusiveId, setGlobal]);
+
+    const dismissInstant = useCallback(() => {
+        if (status === "closing" || status === "closed") return;
+        delayedClose.cancel();
+        set((s) => {
+            s.status = "closed";
+            s.blockVisibility = true;
+        });
+        if (!disableMultipleBlock) {
+            setGlobal((s) => {
+                if (s.popOverId === floatingExclusiveId) s.popOverId = null;
+            });
+        }
+    }, [status, delayedClose, set, setGlobal, disableMultipleBlock, floatingExclusiveId]);
+
+    const openHandler = useCallback(() => {
+        if (status === "opened") return;
+        delayedClose.cancel();
+        set((s) => {
+            s.status = "opened";
+            s.blockVisibility = true;
+            s.alignX = alignXFromUser || "center";
+            s.alignY = alignYFromUser || "top";
+        });
+    }, [status, set, alignXFromUser, alignYFromUser, delayedClose]);
+
+    const closeHandler = useCallback((options) => {
+        if (options?.instant) {
+            closeHandlerFromChildRef.current?.({ instant: true });
+            return;
+        }
+        closeHandlerFromChildRef.current?.();
+    }, []);
+
+    const closeFromOpenProp = useCallback(() => {
+        if (status === "closing" || status === "closed") return;
+
+        const instant =
+            dismissWithoutAnimationRef != null && dismissWithoutAnimationRef.current === true;
+        if (dismissWithoutAnimationRef) {
+            dismissWithoutAnimationRef.current = false;
+        }
+
+        if (instant) {
+            dismissInstant();
+            return;
+        }
+        delayedClose.cancel();
+        setByPath("status", "closing");
+        delayedClose.run();
+    }, [
+        status,
+        dismissWithoutAnimationRef,
+        delayedClose,
+        setByPath,
+        dismissInstant,
+    ]);
+
+    useEffect(() => {
+        if (!isMounted) return;
+        if (!open) {
+            closeFromOpenProp();
+            return;
+        }
+        if (effectiveOpen) {
+            openHandler();
+            return;
+        }
+    }, [isMounted, open, effectiveOpen, openHandler, closeFromOpenProp]);
+
+    useEffect(
+        () => () => {
+            delayedCloseRef.current.cancel();
+        },
+        [],
+    );
+
+    useLayoutEffect(() => {
+        if (status !== "opened") return;
+        getPos();
+    }, [status, getPos]);
+
+    const isFloatingActive = status === "opened" || status === "closing";
+
+    const mountRootForHost = useMemo(() => {
+        if (typeof document === "undefined" || !isFloatingActive) return null;
+        if (referenceEl) return pickFloatingMountRoot(referenceEl, resolveFloatingMount);
+        return document.body;
+    }, [isFloatingActive, referenceEl, resolveFloatingMount]);
+
+    useLayoutEffect(() => {
+        if (!mountRootForHost) return undefined;
+        acquireFloatingMountHost(mountRootForHost);
+        return () => {
+            releaseFloatingMountHost(mountRootForHost);
+        };
+    }, [mountRootForHost]);
+
+    const floatingMountHost = useMemo(() => {
+        if (!mountRootForHost) return null;
+        return ensureFloatingMountHost(mountRootForHost);
+    }, [mountRootForHost]);
+
+    floatingMountHostRef.current = floatingMountHost;
+
+    useEventListener("scroll", getPos, {
+        enabled: status === "opened",
+        delay: 0,
+        isThrottle: false,
+        passive: true,
+        capture: true,
+        source: typeof document !== "undefined" ? document : undefined,
+    });
+
+    useEventListener(
+        ["scroll", "resize"],
+        getPos,
+        {
+            enabled:
+                status === "opened" &&
+                typeof window !== "undefined" &&
+                Boolean(window.visualViewport),
+            delay: 0,
+            isThrottle: false,
+            passive: true,
+            source: typeof window !== "undefined" ? window.visualViewport : undefined,
+        },
+    );
+
+    const floatingPadding = useMemo(
+        () =>
+            generate4DirectionProps([
+                padding != null && padding !== "" ? padding : DEFAULT_FLOATING_PADDING,
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft,
+            ]),
+        [padding, paddingTop, paddingRight, paddingBottom, paddingLeft],
+    );
+
+    const floatingMaxWidth = useMemo(() => {
+        if (maxWidth == null || maxWidth === "") return undefined;
+        return cssNormalizeSize(maxWidth);
+    }, [maxWidth]);
+
+    const { ref: observedChildrenRef } = useObserver({
+        disable: !isFloatingActive,
+        threshold: 0,
+        customViewportMargin: 0,
+        onExit: () => {
+            closeHandler({ instant: true });
+        },
+    });
+
+    const setChildrenNode = useCallback(
+        (node) => {
+            childrenRef.current = node;
+            setReferenceEl(node);
+            observedChildrenRef(node);
+        },
+        [observedChildrenRef],
+    );
+
+    useEventListener("resize", getPos, {
+        enabled: status === "opened",
+        delay: 100,
+        passive: true,
+    });
+
+    useLayoutEffect(() => {
+        if (status !== "opened" || !referenceEl || !floatingEl) return;
+        if (typeof ResizeObserver === "undefined") return;
+
+        let frame = null;
+        const schedulePosition = () => {
+            if (frame != null) return;
+            frame = requestAnimationFrame(() => {
+                frame = null;
+                getPos();
+            });
+        };
+
+        const ro = new ResizeObserver(schedulePosition);
+        ro.observe(referenceEl);
+        ro.observe(floatingEl);
+        schedulePosition();
+
+        return () => {
+            ro.disconnect();
+            if (frame != null) cancelAnimationFrame(frame);
+        };
+    }, [status, referenceEl, floatingEl, getPos]);
+
+    useEventListener(
+        "pointerdown",
+        (e) => {
+            if (!isFloatingActive || !listenOutsidePointer) return;
+
+            const target = e.target;
+            const triggerEl = childrenRef.current;
+            const floatingEl = floatingRef.current;
+
+            if (triggerEl?.contains(target) || floatingEl?.contains(target)) return;
+
+            if (
+                disableMultipleBlock &&
+                typeof Element !== "undefined" &&
+                target instanceof Element &&
+                typeof target.closest === "function" &&
+                target.closest(POP_OVER_TRIGGER_SELECTOR)
+            ) {
+                return;
+            }
+
+            closeHandler();
+        },
+        {
+            delay: 0,
+            passive: true,
+            capture: true,
+            enabled: isFloatingActive && listenOutsidePointer,
+            source: typeof document !== "undefined" ? document : undefined,
+        },
+    );
+
+    useEventListener(
+        "keydown",
+        (e) => {
+            if (!isFloatingActive || !listenEscapeKey) return;
+            if (e.key !== "Escape") return;
+
+            closeHandler();
+        },
+        {
+            delay: 0,
+            enabled: isFloatingActive && listenEscapeKey,
+            source: typeof document !== "undefined" ? document : undefined,
+        },
+    );
+
+    const [theme] = baseStore.useGlobal((s) => [s.theme]);
+
+    const colors = colorGet(bgColor || theme.background);
+
+    /* Return */
+    return useExportData(
+        {
+            exportData,
+            ...p,
+            delayMs,
+            status,
+            colors,
+            Variant,
+            set,
+            setByPath,
+            childrenRef: setChildrenNode,
+            floatingRef: setFloatingNode,
+            open,
+            alignX,
+            alignY,
+            disableArrow,
+            color,
+            onMouseEnter,
+            onMouseLeave,
+            onClick,
+            closeHandler,
+            popOverTriggerMarker,
+        },
+        {
+            isMounted,
+            positionX,
+            positionY,
+            arrowOffset,
+            blockVisibility,
+            floatingMountHost,
+            floatingPadding,
+            floatingMaxWidth,
+        },
+    );
+};
+export default useVars;

package/src/libs/GoogleMapViewer/_dS.jsx

@@ -0,0 +1,69 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { Flex } from "../Flex";
+import { GoogleMapViewer } from ".";
+
+const SAMPLE_PB =
+    "!1m17!1m12!1m3!1d1133.694039040681!2d40.23570134144272!3d37.91067108076305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMzfCsDU0JzM5LjYiTiA0MMKwMTQnMTIuNCJF!5e0!3m2!1sen!2sgr!4v1785012948463!5m2!1sen!2sgr";
+
+const X = () => (
+    <Ds.page
+        title="<GoogleMapViewer>"
+        releasedOn="1.0.0"
+        description={{ tr: "pb değerinden (pb= sonrasındaki, başındaki ! dahil bölüm) bir Google Maps embed iframe'i render eder.", en: "Renders a Google Maps embed iframe from a pb value (the segment after pb=, including the leading !)." }}
+    >
+        <Ds.block
+            title={{ tr: "Temel Kullanım", en: "Basic Usage" }}
+            code={`import { GoogleMapViewer } from "${SYS.basePath}";
+
+                        <GoogleMapViewer pb={content.googleMapsLinkPb} />`}
+            example={
+                <Flex padding={10} full>
+                    <GoogleMapViewer pb={SAMPLE_PB} w="100%" h={320} />
+                </Flex>
+            }
+        />
+        <Ds.block
+            title={{ tr: "Özel Boyut", en: "Custom Size" }}
+            description={{ tr: "w ve h; sayıları (→ rem) veya CSS boyut string'lerini kabul eder. Varsayılanlar Google'ın embed varsayılanlarıyla aynıdır (600 × 450).", en: "w and h accept numbers (→ rem) or CSS size strings. Defaults match Google's embed defaults (600 × 450)." }}
+            code={`import { GoogleMapViewer } from "${SYS.basePath}";
+
+                        <GoogleMapViewer pb={pb} w={600} h={450} />
+                        <GoogleMapViewer pb={pb} w="100%" h={280} />`}
+            example={
+                <Flex gap={16} wrap padding={10} full>
+                    <GoogleMapViewer pb={SAMPLE_PB} w={320} h={240} />
+                    <GoogleMapViewer pb={SAMPLE_PB} w="100%" h={280} />
+                </Flex>
+            }
+        />
+        <Ds.api
+            args="<GoogleMapViewer pb={string} />"
+            props={{
+                pb: {
+                    description:
+                        "Required. Maps embed pb value including the leading !. Missing/empty → null. Full embed URLs and pb=… strings are also accepted and normalized.",
+                    type: "string",
+                    required: true,
+                },
+                w: {
+                    description: { tr: "Iframe genişliği. Sayı → rem; string → CSS boyutu.", en: "Iframe width. Number → rem; string → CSS size." },
+                    type: "number | string",
+                    defaultValue: "600",
+                },
+                h: {
+                    description: { tr: "Iframe yüksekliği. Sayı → rem; string → CSS boyutu.", en: "Iframe height. Number → rem; string → CSS size." },
+                    type: "number | string",
+                    defaultValue: "450",
+                },
+                title: {
+                    description: { tr: "Erişilebilir iframe başlığı.", en: "Accessible iframe title." },
+                    type: "string",
+                    defaultValue: '"Google Map"',
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/GoogleMapViewer/_styled.js

@@ -0,0 +1,17 @@
+import styled, { css } from "styled-components";
+
+const S = {
+    iframe: styled.iframe`
+        ${({ $width, $height }) => css`
+            all: unset;
+            display: block;
+            box-sizing: border-box;
+            width: ${$width};
+            height: ${$height};
+            max-width: 100%;
+            border: 0;
+        `}
+    `,
+};
+
+export default S;

package/src/libs/GoogleMapViewer/index.jsx

@@ -0,0 +1,26 @@
+import S from "./_styled";
+import { useVars } from "./useVars";
+
+export const GoogleMapViewer = ({ pb, w, h, title = "Google Map", className, style, ...rest }) => {
+    const { src, width, height } = useVars({ pb, w, h });
+
+    // pb mandatory — missing / empty / unparseable → render nothing
+    if (pb == null || pb === "" || !src) return null;
+
+    return (
+        <S.iframe
+            src={src}
+            title={title}
+            className={className}
+            style={style}
+            $width={width}
+            $height={height}
+            allowFullScreen
+            loading="lazy"
+            referrerPolicy="strict-origin-when-cross-origin"
+            {...rest}
+        />
+    );
+};
+
+GoogleMapViewer.displayName = "GoogleMapViewer";

package/src/libs/GoogleMapViewer/useVars.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { cssNormalizeSize } from "../cssNormalizeSize";
+
+const EMBED_BASE = "https://www.google.com/maps/embed?pb=";
+
+const normalizePb = (pb) => {
+    if (pb == null || pb === "") return null;
+
+    let value = String(pb).trim();
+    if (!value) return null;
+
+    if (/^https?:\/\//i.test(value)) {
+        try {
+            const url = new URL(value);
+            const fromQuery = url.searchParams.get("pb");
+            if (fromQuery) return fromQuery;
+        } catch {
+            /* keep raw */
+        }
+    }
+
+    if (value.startsWith("pb=")) value = value.slice(3);
+
+    return value || null;
+};
+
+export const useVars = ({ pb, w = 600, h = 450 } = {}) => {
+    const src = useMemo(() => {
+        const normalized = normalizePb(pb);
+        if (!normalized) return null;
+        return `${EMBED_BASE}${normalized}`;
+    }, [pb]);
+
+    const width = useMemo(() => cssNormalizeSize(w) ?? cssNormalizeSize(600), [w]);
+    const height = useMemo(() => cssNormalizeSize(h) ?? cssNormalizeSize(450), [h]);
+
+    return { src, width, height };
+};