@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/ParalaxItem/index.jsx

@@ -0,0 +1,64 @@
+import S from "./_styled";
+import { useVars } from "./useVars";
+import { Image } from "../Image";
+import { useCoverImageVars } from "./useCoverImageVars";
+
+const Speed = ({ speed = 0, className, style, children, ...rest }) => {
+    const { isActive, ref } = useVars({ speed });
+
+    if (!isActive) return children ?? null;
+
+    return (
+        <S.container ref={ref} className={className} style={style} {...rest}>
+            {children}
+        </S.container>
+    );
+};
+
+const CoverImage = ({
+    w,
+    h,
+    width,
+    height,
+    className,
+    style,
+    horizontal = false,
+    threshold = 25,
+    alt = "",
+    loadInViewport = true,
+    ...imageProps
+}) => {
+    const normalizedAxis = horizontal ? "x" : "y";
+    const { ref } = useCoverImageVars({ axis: normalizedAxis, threshold });
+    const resolvedWidth = width ?? w ?? "100%";
+    const resolvedHeight = height ?? h ?? "50vh";
+
+    return (
+        <S.coverContainer
+            ref={ref}
+            className={className}
+            data-paralax-axis={normalizedAxis}
+            style={{ ...style, width: resolvedWidth, height: resolvedHeight }}
+        >
+            <Image
+                {...imageProps}
+                alt={alt}
+                w={normalizedAxis === "x" ? "auto" : "100%"}
+                h={normalizedAxis === "x" ? "100%" : "auto"}
+                objectFit="cover"
+                loadInViewport={loadInViewport}
+            />
+        </S.coverContainer>
+    );
+};
+
+export const ParalaxItem = Speed;
+
+Object.assign(ParalaxItem, {
+    speed: Speed,
+    coverImage: CoverImage,
+});
+
+ParalaxItem.displayName = "ParalaxItem";
+Speed.displayName = "ParalaxItem.speed";
+CoverImage.displayName = "ParalaxItem.coverImage";

package/src/libs/ParalaxItem/useCoverImageVars.js

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+    attachScrollListener,
+    isDocumentScrollElement,
+    isWindowLike,
+} from "helpers/getScrollParent";
+import { useScrollTarget } from "helpers/getScrollParent/useScrollTarget";
+
+const getViewportBounds = (source) => {
+    if (
+        typeof window === "undefined" ||
+        !source ||
+        isWindowLike(source) ||
+        isDocumentScrollElement(source)
+    ) {
+        return { top: 0, height: window?.innerHeight || 0 };
+    }
+
+    const rect = source.getBoundingClientRect();
+    return { top: rect.top, height: source.clientHeight || rect.height };
+};
+
+export const useCoverImageVars = ({ axis = "y", threshold = 25 } = {}) => {
+    const nodeRef = useRef(null);
+    const rafRef = useRef(0);
+    const sourceRef = useRef(null);
+    const { ref: scrollTargetRef, source } = useScrollTarget();
+    sourceRef.current = source;
+
+    const update = useCallback(() => {
+        rafRef.current = 0;
+        const node = nodeRef.current;
+        if (!node) return;
+
+        const rect = node.getBoundingClientRect();
+        const viewport = getViewportBounds(sourceRef.current);
+        const image = node.querySelector("img");
+        if (!image) return;
+        const rawProgress = Math.min(
+            1,
+            Math.max(
+                0,
+                (viewport.top + viewport.height - rect.top) / (viewport.height + rect.height),
+            ),
+        );
+        const normalizedThreshold = Math.min(50, Math.max(0, Number(threshold) || 0)) / 100;
+        const start = (viewport.height * normalizedThreshold) / (viewport.height + rect.height);
+        const end =
+            (viewport.height * (1 - normalizedThreshold) + rect.height) /
+            (viewport.height + rect.height);
+        const progress = Math.min(1, Math.max(0, (rawProgress - start) / (end - start)));
+        const imageRect = image.getBoundingClientRect();
+        const availableDistance = Math.max(
+            0,
+            axis === "x" ? imageRect.width - rect.width : imageRect.height - rect.height,
+        );
+
+        node.style.setProperty(
+            axis === "x" ? "--paralax-cover-x" : "--paralax-cover-y",
+            `${-progress * availableDistance}px`,
+        );
+    }, [axis, threshold]);
+
+    const scheduleUpdate = useCallback(() => {
+        if (!rafRef.current) rafRef.current = requestAnimationFrame(update);
+    }, [update]);
+
+    const ref = useCallback(
+        (node) => {
+            nodeRef.current = node;
+            scrollTargetRef(node);
+        },
+        [scrollTargetRef],
+    );
+
+    useEffect(() => {
+        if (typeof window === "undefined" || !source) return undefined;
+
+        const detachScroll = attachScrollListener(source, scheduleUpdate);
+        window.addEventListener("resize", scheduleUpdate);
+        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        resizeObserver.observe(nodeRef.current);
+        const image = nodeRef.current?.querySelector("img");
+        if (image) resizeObserver.observe(image);
+        nodeRef.current?.addEventListener("load", scheduleUpdate, true);
+        scheduleUpdate();
+
+        return () => {
+            detachScroll();
+            window.removeEventListener("resize", scheduleUpdate);
+            resizeObserver.disconnect();
+            nodeRef.current?.removeEventListener("load", scheduleUpdate, true);
+            if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleUpdate, source]);
+
+    return { ref };
+};

package/src/libs/ParalaxItem/useVars.js

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+    attachScrollListener,
+    isDocumentScrollElement,
+    isWindowLike,
+} from "helpers/getScrollParent";
+import { useScrollTarget } from "helpers/getScrollParent/useScrollTarget";
+
+const SPEED_FACTOR = 100;
+/** Start/stop scroll listening this many viewport heights outside the visible area. */
+const VIEWPORT_LISTEN_MULTIPLIER = 2;
+
+export const normalizeSpeed = (speed) => {
+    const value = Number(speed);
+    return Number.isFinite(value) ? value : 0;
+};
+
+export const getViewportCenterY = (source) => {
+    if (typeof window === "undefined") return 0;
+
+    if (!source || isWindowLike(source) || isDocumentScrollElement(source)) {
+        return window.innerHeight / 2;
+    }
+
+    const rect = source.getBoundingClientRect();
+    return rect.top + rect.height / 2;
+};
+
+export const resolveObserverRoot = (source) => {
+    if (!source || isWindowLike(source) || isDocumentScrollElement(source)) return null;
+    return source;
+};
+
+export const getViewportHeight = (source) => {
+    if (typeof window === "undefined") return 0;
+
+    if (!source || isWindowLike(source) || isDocumentScrollElement(source)) {
+        return window.innerHeight || 0;
+    }
+
+    return source.clientHeight || 0;
+};
+
+/** rootMargin expands the observer box by N× viewport height on top and bottom. */
+export const getListenRootMargin = (source, multiplier = VIEWPORT_LISTEN_MULTIPLIER) => {
+    const band = Math.max(0, getViewportHeight(source) * multiplier);
+    return `${band}px 0px ${band}px 0px`;
+};
+
+export const calcParalaxOffset = ({ rect, offsetY, viewportCenterY, speed }) => {
+    const naturalCenterY = rect.top + rect.height / 2 - offsetY;
+    const distanceFromOrigin = naturalCenterY - viewportCenterY;
+    return distanceFromOrigin * (speed / SPEED_FACTOR);
+};
+
+export const useVars = ({ speed = 0 } = {}) => {
+    const normalizedSpeed = normalizeSpeed(speed);
+    const isActive = normalizedSpeed !== 0;
+
+    const offsetRef = useRef(0);
+    const rafRef = useRef(0);
+    const nodeRef = useRef(null);
+    const sourceRef = useRef(null);
+    const reducedMotionRef = useRef(false);
+    const listeningRef = useRef(false);
+    const detachListeningRef = useRef(null);
+    const [observedNode, setObservedNode] = useState(null);
+    const [viewportBand, setViewportBand] = useState(0);
+
+    const { ref: scrollTargetRef, source } = useScrollTarget();
+    sourceRef.current = source;
+
+    const applyOffset = useCallback((value) => {
+        const node = nodeRef.current;
+        offsetRef.current = value;
+        if (!node) return;
+        node.style.setProperty("--paralax-y", `${value}px`);
+    }, []);
+
+    const update = useCallback(() => {
+        rafRef.current = 0;
+        const node = nodeRef.current;
+        if (!node || reducedMotionRef.current) return;
+
+        const nextOffset = calcParalaxOffset({
+            rect: node.getBoundingClientRect(),
+            offsetY: offsetRef.current,
+            viewportCenterY: getViewportCenterY(sourceRef.current),
+            speed: normalizedSpeed,
+        });
+
+        applyOffset(nextOffset);
+    }, [applyOffset, normalizedSpeed]);
+
+    const scheduleUpdate = useCallback(() => {
+        if (rafRef.current) return;
+        rafRef.current = requestAnimationFrame(update);
+    }, [update]);
+
+    const stopListening = useCallback(() => {
+        if (!listeningRef.current) return;
+        listeningRef.current = false;
+        detachListeningRef.current?.();
+        detachListeningRef.current = null;
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = 0;
+        }
+    }, []);
+
+    const startListening = useCallback(() => {
+        if (listeningRef.current || typeof window === "undefined") return;
+
+        const scrollSource = sourceRef.current;
+        if (!scrollSource) return;
+
+        listeningRef.current = true;
+        const onScrollOrResize = () => scheduleUpdate();
+        const detachScroll = attachScrollListener(scrollSource, onScrollOrResize);
+        window.addEventListener("resize", onScrollOrResize);
+        detachListeningRef.current = () => {
+            detachScroll();
+            window.removeEventListener("resize", onScrollOrResize);
+        };
+        scheduleUpdate();
+    }, [scheduleUpdate]);
+
+    const ref = useCallback(
+        (el) => {
+            nodeRef.current = el;
+            setObservedNode((prev) => (Object.is(prev, el) ? prev : el));
+            scrollTargetRef(el);
+        },
+        [scrollTargetRef],
+    );
+
+    useEffect(() => {
+        if (!isActive || typeof window === "undefined" || !window.matchMedia) return undefined;
+
+        const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const sync = () => {
+            reducedMotionRef.current = media.matches;
+            if (media.matches) applyOffset(0);
+            else if (listeningRef.current) scheduleUpdate();
+        };
+
+        sync();
+        media.addEventListener?.("change", sync);
+        return () => media.removeEventListener?.("change", sync);
+    }, [applyOffset, isActive, scheduleUpdate]);
+
+    // Keep observer rootMargin in sync with viewport / scroll-parent height (2× band).
+    useEffect(() => {
+        if (!isActive || typeof window === "undefined") return undefined;
+
+        const syncBand = () => {
+            const next = getViewportHeight(sourceRef.current);
+            setViewportBand((prev) => (prev === next ? prev : next));
+        };
+
+        syncBand();
+        window.addEventListener("resize", syncBand);
+        return () => window.removeEventListener("resize", syncBand);
+    }, [isActive, source]);
+
+    useEffect(() => {
+        if (!isActive || !observedNode) {
+            stopListening();
+            return undefined;
+        }
+
+        if (typeof IntersectionObserver === "undefined") {
+            startListening();
+            return () => stopListening();
+        }
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry?.isIntersecting) startListening();
+                else stopListening();
+            },
+            {
+                threshold: 0,
+                root: resolveObserverRoot(source),
+                rootMargin: getListenRootMargin(source, VIEWPORT_LISTEN_MULTIPLIER),
+            },
+        );
+
+        observer.observe(observedNode);
+        return () => {
+            observer.disconnect();
+            stopListening();
+        };
+    }, [isActive, observedNode, source, viewportBand, startListening, stopListening]);
+
+    useEffect(() => {
+        if (isActive) return undefined;
+        applyOffset(0);
+        return undefined;
+    }, [applyOffset, isActive]);
+
+    return {
+        isActive,
+        ref,
+        source,
+        speed: normalizedSpeed,
+    };
+};

package/src/libs/PopConfirm/_dS.jsx

@@ -0,0 +1,148 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { PopConfirm } from ".";
+import { Button } from "../Button";
+import { getText, t } from "../getText";
+import { notifier } from "../notifier";
+import { Flex } from "../Flex";
+import { DEFAULT_TRIGGER_DELAY_MS } from "./tools/defaultPopConfirmProps";
+
+const X = () => (
+    <Ds.page
+        title="<PopConfirm>"
+        releasedOn="1.0.0"
+        description={
+            <>
+                {t({ tr: "PopConfirm, bir action'ı onaylamak için kullanılan componenttir. İlk action tetiklendikten sonra durdurulur; yalnızca onay verildiğinde çalışır, iptal edildiğinde yok sayılır.", en: "PopConfirm is a component used to confirm an action. After the initial action is triggered, it is held; it executes only after confirmation and is ignored when cancelled." })}
+                <br />
+                <br />
+                {t({ tr: "PopConfirm, PopOver ve Button componentleri üzerine kuruludur. Üç buton contentButtonProps, confirmButtonProps ve cancelButtonProps ile yönetilir. Diğer tüm proplar PopOver'a aktarılır.", en: "PopConfirm is built on PopOver and Button. Its three buttons are managed through contentButtonProps, confirmButtonProps, and cancelButtonProps. All other props are passed to PopOver." })}
+                <br />
+                <br />
+                {t({ tr: "Ayrıntılı kullanım örnekleri:", en: "Detailed usage examples:" })}
+                <br />
+                <Button.string to="/design-system/popOver" label="PopOver" />
+                <br />
+                <Button.string to="/design-system/button" label="Button" />
+            </>
+        }
+    >
+        <Ds.block
+            title={{ tr: "Temel Kullanım", en: "Basic Usage" }}
+            code={`import { PopConfirm } from "${SYS.basePath}";
+
+                   <PopConfirm
+                    contentButtonProps={{
+                        label: "Delete",
+                        onClick: () => notifier.add("deleted"),
+                    }}
+                    confirmButtonProps={{
+                        onClick: () => notifier.add("confirmed."),
+                    }}
+                    cancelButtonProps={{
+                        onClick: () => notifier.add("cancelled"),
+                    }}
+                   />`}
+            example={
+                <PopConfirm
+                    contentButtonProps={{
+                        label: "Delete",
+                        onClick: () => notifier.add("deleted"),
+                    }}
+                    confirmButtonProps={{
+                        onClick: () => notifier.add("confirmed."),
+                    }}
+                    cancelButtonProps={{
+                        onClick: () => notifier.add("cancelled"),
+                    }}
+                />
+            }
+        />
+        <Ds.block
+            title={{ tr: "Gelişmiş Kullanım", en: "Advanced Usage" }}
+            code={`import { PopConfirm } from "${SYS.basePath}";
+
+                   <PopConfirm
+                    content="Warning: This action is irreversible."
+                    contentButtonProps={{
+                        icon: { icon: "trash", hoverIcon: "warning", activeIcon: "warning" },
+                        bgColor: "error",
+                        hoverBgColor: "foreground",
+                        activeBgColor: "success",
+                        onClick: () => notifier.add("action triggered."),
+                    }}
+                    confirmButtonProps={{
+                        label: undefined,
+                        prefix: undefined,
+                        icon: { icon: "download" },
+                        onClick: () => notifier.add("confirmed."),
+                    }}
+                    cancelButtonProps={{
+                        label: undefined,
+                        prefix: undefined,
+                        icon: { icon: "arrowLeft" },
+                        onClick: () => notifier.add("cancelled"),
+                    }}
+                   />`}
+            example={
+                <PopConfirm
+                    content="Warning: This action is irreversible."
+                    contentButtonProps={{
+                        icon: { icon: "trash", hoverIcon: "warning", activeIcon: "warning" },
+                        bgColor: "error",
+                        hoverBgColor: "foreground",
+                        activeBgColor: "success",
+                        onClick: () => notifier.add("action triggered."),
+                    }}
+                    confirmButtonProps={{
+                        label: undefined,
+                        prefix: undefined,
+                        icon: { icon: "download" },
+                        onClick: () => notifier.add("confirmed."),
+                    }}
+                    cancelButtonProps={{
+                        label: undefined,
+                        prefix: undefined,
+                        icon: { icon: "arrowLeft" },
+                        onClick: () => notifier.add("cancelled"),
+                    }}
+                />
+            }
+        />
+        <Ds.api
+            args="<PopConfirm />"
+            props={{
+                content: {
+                    description: { tr: "Gösterilecek onay mesajı.", en: "The confirmation message to display." },
+                    type: "React Node",
+                    defaultValue: getText("areYouSure"),
+                },
+                contentButtonProps: {
+                    description: { tr: "Tetikleyici Button componentinin propları. Ayrıntılar için Button API'sine bakın.", en: "Props for the trigger Button component. See the Button API for details." },
+                    type: "object",
+                },
+                confirmButtonProps: {
+                    description: { tr: "Onay butonu. onClick tetikleyiciyle birleştirilir; hem href/to/url hem de tetikleyici verilirse tetikleyici önceliklidir.", en: "Confirm button. Its onClick is merged with the trigger; if both href/to/url and a trigger are set, the trigger takes precedence." },
+                    type: "object",
+                    defaultValue: '{ label: "Confirm", prefix: { icon: "check" } }',
+                },
+                cancelButtonProps: {
+                    description: { tr: "İptal butonu. Tıklandığında paneli kapatır. Dışarı tıklanınca buradaki onClick/href/to/url propları tetiklenir.", en: "Cancel button. Closes the panel when clicked. On outside clicks, its onClick/href/to/url props are triggered." },
+                    type: "object",
+                    defaultValue: '{ label: "Cancel", prefix: { icon: "close" } }',
+                },
+                triggerDelayMs: {
+                    description: { tr: "Onaydan sonra ertelenmiş action'lar çalışıp panel kapanmadan önce content butonunun click animasyonunu oynatacağı süre (ms).", en: "After confirmation, how long (ms) the content button plays its click animation before deferred actions run and the panel closes." },
+                    type: "number",
+                    defaultValue: String(DEFAULT_TRIGGER_DELAY_MS),
+                },
+                _rest: {
+                    description: { tr: "Diğer tüm proplar PopOver'a aktarılır. Ayrıntılar için PopOver API'sine bakın.", en: "All other props are passed to PopOver. See the PopOver API for details." },
+                    type: "object",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/PopConfirm/index.js

@@ -0,0 +1,8 @@
+import { Base } from "./tools/_Base";
+import { componentCreator } from "helpers/componentCreator";
+
+export const PopConfirm = componentCreator({
+    name: "PopConfirm",
+    BaseComp: Base,
+    variants: {},
+});

package/src/libs/PopConfirm/tools/_Base.jsx

@@ -0,0 +1,21 @@
+import useVars from "./useVars";
+import { PopOver } from "../../PopOver";
+import { Flex } from "../../Flex";
+import { Button } from "../../Button";
+
+export const Base = (p) => {
+    const { confirmButtonProps, cancelButtonProps, content, popOverProps } = useVars(p);
+
+    /* Return */
+    return (
+        <PopOver {...popOverProps}>
+            <Flex gap={12} padding={5} full wrap>
+                <Flex full>{content}</Flex>
+                <Flex full xAlign="end" wrap>
+                    <Button {...cancelButtonProps} />
+                    <Button {...confirmButtonProps} />
+                </Flex>
+            </Flex>
+        </PopOver>
+    );
+};