@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/ImageGalery/Amedist/index.jsx

@@ -0,0 +1,285 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "../../Button";
+import { Image } from "../../Image";
+import { ScrollFlex } from "../../ScrollFlex";
+import { t } from "../../getText";
+import S from "./_styled";
+
+const controlIcons = {
+    close: "close",
+    previous: "arrowLeft",
+    next: "arrowRight",
+};
+
+/** Enter scroll mode when content exceeds viewport by this many px. */
+const SCROLL_ENTER_PX = 1;
+/**
+ * Leave scroll mode only when content clearly fits (hysteresis).
+ * Prevents ScrollFlex ↔ centered row flip-flop while images decode / scrollbar gutter shifts.
+ */
+const SCROLL_EXIT_SLACK_PX = 48;
+
+const toCssLength = (value) => (typeof value === "number" ? `${value}rem` : value);
+const toRemNumber = (value) => {
+    const number = Number.parseFloat(value);
+    return Number.isFinite(number) ? number : 0;
+};
+
+const normalizeAlignX = (alignX) => {
+    if (alignX === "start" || alignX === "left") return "start";
+    if (alignX === "end" || alignX === "right") return "end";
+    return "center";
+};
+
+const Control = ({ label, onClick, position }) => (
+    <S.control $position={position}>
+        <Button.plain
+            primary
+            ariaLabel={label}
+            skipClickCooldown
+            skipOnClickHold
+            onClick={onClick}
+            icon={{
+                icon: controlIcons[position],
+                width: 16,
+                flat: true,
+            }}
+        />
+    </S.control>
+);
+
+const Thumbnail = ({ image, index, thumbnailHeight, onSelect }) => (
+    <S.thumbnail
+        type="button"
+        $height={thumbnailHeight}
+        onClick={(event) => {
+            onSelect(index);
+            event.currentTarget.blur();
+        }}
+        aria-label={`${image.alt ? t(image.alt) : "Image"} ${index + 1}`}
+    >
+        <Image
+            {...image.thumbnail}
+            alt={image.alt}
+            h={`${thumbnailHeight}rem`}
+            w="auto"
+            objectFit="cover"
+            responsive={false}
+            progressive={false}
+            loadInViewport
+        />
+    </S.thumbnail>
+);
+
+const Amedist = ({
+    images,
+    selectedIndex,
+    selectedImage,
+    isOpen,
+    canGoPrevious,
+    canGoNext,
+    onSelect,
+    onClose,
+    onPrevious,
+    onNext,
+    thumbnailHeight = 150,
+    gap = 10,
+    marginToEdge = 150,
+    alignX = "center",
+    className,
+}) => {
+    const rootRef = useRef(null);
+    const measureRowRef = useRef(null);
+    const needsScrollRef = useRef(false);
+    const measureRafRef = useRef(null);
+    const [needsScroll, setNeedsScroll] = useState(false);
+
+    const edgeSpacerWidth = `max(0px, calc(${toRemNumber(marginToEdge)}px - ${toCssLength(gap)}))`;
+    const caption = selectedImage?.alt != null && selectedImage.alt !== "" ? t(selectedImage.alt) : "";
+    const resolvedAlignX = normalizeAlignX(alignX);
+
+    const applyNeedsScroll = useCallback((next) => {
+        if (needsScrollRef.current === next) return;
+        needsScrollRef.current = next;
+        setNeedsScroll(next);
+    }, []);
+
+    const remeasure = useCallback(() => {
+        if (measureRafRef.current != null) return;
+
+        measureRafRef.current = requestAnimationFrame(() => {
+            measureRafRef.current = null;
+
+            const root = rootRef.current;
+            const row = measureRowRef.current;
+            if (!root || !row) return;
+
+            const contentWidth = row.scrollWidth;
+            const viewportWidth = root.clientWidth;
+            const prev = needsScrollRef.current;
+
+            // Hysteresis: once scrolling, stay until content clearly fits again.
+            const next = prev
+                ? contentWidth > viewportWidth - SCROLL_EXIT_SLACK_PX
+                : contentWidth > viewportWidth + SCROLL_ENTER_PX;
+
+            applyNeedsScroll(next);
+        });
+    }, [applyNeedsScroll]);
+
+    useLayoutEffect(() => {
+        needsScrollRef.current = false;
+        applyNeedsScroll(false);
+        remeasure();
+
+        const root = rootRef.current;
+        const row = measureRowRef.current;
+        if (!root || !row || typeof ResizeObserver === "undefined") {
+            if (typeof window !== "undefined") {
+                window.addEventListener("resize", remeasure);
+                return () => window.removeEventListener("resize", remeasure);
+            }
+            return undefined;
+        }
+
+        const ro = new ResizeObserver(remeasure);
+        ro.observe(root);
+        ro.observe(row);
+        window.addEventListener("resize", remeasure);
+
+        return () => {
+            ro.disconnect();
+            window.removeEventListener("resize", remeasure);
+            if (measureRafRef.current != null) {
+                cancelAnimationFrame(measureRafRef.current);
+                measureRafRef.current = null;
+            }
+        };
+    }, [remeasure, applyNeedsScroll, images, thumbnailHeight, gap]);
+
+    const thumbnails = images.map((image, index) => (
+        <Thumbnail
+            key={image.key}
+            image={image}
+            index={index}
+            thumbnailHeight={thumbnailHeight}
+            onSelect={onSelect}
+        />
+    ));
+
+    return (
+        <S.root ref={rootRef} className={className} data-component="ImageGalery">
+            <S.measureHost aria-hidden="true">
+                <S.measureRow ref={measureRowRef} $gap={gap} $height={thumbnailHeight}>
+                    {images.map((image) => (
+                        <S.thumbnail
+                            key={`measure-${image.key}`}
+                            type="button"
+                            $height={thumbnailHeight}
+                            tabIndex={-1}
+                        >
+                            <Image
+                                {...image.thumbnail}
+                                alt=""
+                                h={`${thumbnailHeight}rem`}
+                                w="auto"
+                                objectFit="cover"
+                                responsive={false}
+                                progressive={false}
+                                loadInViewport={false}
+                            />
+                        </S.thumbnail>
+                    ))}
+                </S.measureRow>
+            </S.measureHost>
+
+            {needsScroll ? (
+                <ScrollFlex.plain
+                    width="100%"
+                    height={thumbnailHeight + 20}
+                    autoWidth={false}
+                    autoHeight={false}
+                    enableDragging
+                    flexProps={{
+                        gap,
+                        wrap: false,
+                        xAlign: "start",
+                        yAlign: "stretch",
+                        style: {
+                            width: "max-content",
+                            minWidth: "max-content",
+                            maxWidth: "none",
+                            boxSizing: "border-box",
+                            overflowAnchor: "none",
+                        },
+                    }}
+                    scrollBarProps={{
+                        disableY: true,
+                        fillMode: false,
+                        thickness: 3,
+                        trackMargin: toRemNumber(marginToEdge),
+                        edgeMargin: 0,
+                        edgeMarginX: 0,
+                        disableOpacityEffect: true,
+                    }}
+                >
+                    <S.edgeSpacer aria-hidden="true" $width={edgeSpacerWidth} />
+                    {thumbnails}
+                    <S.edgeSpacer aria-hidden="true" $width={edgeSpacerWidth} />
+                </ScrollFlex.plain>
+            ) : (
+                <S.alignedRow $gap={gap} $height={thumbnailHeight} $alignX={resolvedAlignX}>
+                    {thumbnails}
+                </S.alignedRow>
+            )}
+
+            <S.dialog
+                open={isOpen}
+                onClose={onClose}
+                hideCloseButton
+                useScrollFlex={false}
+                style={{
+                    width: "calc(100vw - 50rem)",
+                    height: "calc(100vh - 50rem)",
+                    maxWidth: "calc(100vw - 50rem)",
+                    maxHeight: "calc(100vh - 50rem)",
+                    borderRadius: 0,
+                }}
+                bodyProps={{
+                    style: {
+                        flex: "1 1 auto",
+                        height: "100%",
+                        maxHeight: "none",
+                        padding: 0,
+                    },
+                }}
+            >
+                <S.stage>
+                    {selectedImage && (
+                        <Image
+                            {...selectedImage.full}
+                            alt={selectedImage.alt}
+                            w="100%"
+                            h="100%"
+                            objectFit="contain"
+                            responsive
+                            progressive
+                            fetchPriority="high"
+                        />
+                    )}
+                    {caption ? <S.caption>{caption}</S.caption> : null}
+                    <Control label="Close gallery" onClick={onClose} position="close" />
+                    {canGoPrevious && (
+                        <Control label="Previous image" onClick={onPrevious} position="previous" />
+                    )}
+                    {canGoNext && <Control label="Next image" onClick={onNext} position="next" />}
+                    <S.counter>
+                        {selectedIndex + 1} / {images.length}
+                    </S.counter>
+                </S.stage>
+            </S.dialog>
+        </S.root>
+    );
+};
+
+export default Amedist;

package/src/libs/ImageGalery/_Base.jsx

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Visibility } from "../Visibility";
+import { getImageCatalog, IMAGE_CATALOG_GLOBAL_KEY } from "../createImageCatalog";
+import { baseStore } from "../baseStore";
+
+const DIRECT_SOURCE_PATTERN =
+    /^(?:https?:|data:|blob:|file:|\/|\.{1,2}\/)|\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i;
+
+const hasAltValue = (alt) => {
+    if (alt == null || alt === "") return false;
+    if (typeof alt === "object") {
+        return Object.values(alt).some((value) => typeof value === "string" && value.trim() !== "");
+    }
+    return true;
+};
+
+const resolveCatalogKey = (item, full) => {
+    if (typeof item === "string" && !DIRECT_SOURCE_PATTERN.test(item)) return item;
+    if (item && typeof item === "object" && item.catalogSet) return item.catalogSet;
+    if (full?.catalogSet) return full.catalogSet;
+    return null;
+};
+
+const resolveAlt = (item, full) => {
+    if (item && typeof item === "object" && hasAltValue(item.alt)) return item.alt;
+
+    const catalogKey = resolveCatalogKey(item, full);
+    if (!catalogKey) return undefined;
+
+    const catalogAlt = getImageCatalog()?.[catalogKey]?.alt;
+    return hasAltValue(catalogAlt) ? catalogAlt : undefined;
+};
+
+const normalizeSource = (source) => {
+    if (!source) return null;
+
+    if (typeof source === "string") {
+        return DIRECT_SOURCE_PATTERN.test(source) ? { src: source } : { catalogSet: source };
+    }
+
+    if (typeof source !== "object") return null;
+    if (source.catalogSet) return { catalogSet: source.catalogSet };
+    if (source.externalSet) return { externalSet: source.externalSet };
+    if (source.imageSet) return { externalSet: source.imageSet };
+
+    const src = source.src || source.url || source.path || source.file;
+    if (src) return { src };
+
+    return { externalSet: source };
+};
+
+export const normalizeGalleryImages = (images) => {
+    if (!Array.isArray(images)) return [];
+
+    return images
+        .map((item, index) => {
+            if (!item) return null;
+
+            const isObject = typeof item === "object";
+            const fullCandidate = isObject
+                ? item.full || item.large || item.original || item.image || item
+                : item;
+            const thumbCandidate = isObject ? item.thumbnail || item.thumb || fullCandidate : item;
+            const full = normalizeSource(fullCandidate);
+            const thumbnail = normalizeSource(thumbCandidate) || full;
+
+            if (!full) return null;
+
+            return {
+                key: isObject
+                    ? item.id || item.key || item.catalogSet || `gallery-image-${index}`
+                    : `${item}-${index}`,
+                alt: resolveAlt(item, full),
+                full,
+                thumbnail,
+            };
+        })
+        .filter(Boolean);
+};
+
+export const Base = ({ images, Variant, initialIndex = null, ...rest }) => {
+    const catalog = baseStore.useGlobal((s) => s?.[IMAGE_CATALOG_GLOBAL_KEY]);
+    const normalizedImages = useMemo(
+        () => normalizeGalleryImages(images),
+        [images, catalog],
+    );
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+    const isOpen =
+        Number.isInteger(selectedIndex) &&
+        selectedIndex >= 0 &&
+        selectedIndex < normalizedImages.length;
+
+    const close = useCallback(() => setSelectedIndex(null), []);
+    const previous = useCallback(() => setSelectedIndex((current) => Math.max(0, current - 1)), []);
+    const next = useCallback(
+        () => setSelectedIndex((current) => Math.min(normalizedImages.length - 1, current + 1)),
+        [normalizedImages.length],
+    );
+
+    useEffect(() => {
+        if (!isOpen || typeof document === "undefined") return undefined;
+
+        const handleKeyDown = (event) => {
+            if (event.key === "ArrowLeft" && selectedIndex > 0) previous();
+            if (event.key === "ArrowRight" && selectedIndex < normalizedImages.length - 1) {
+                next();
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, next, normalizedImages.length, previous, selectedIndex]);
+
+    useEffect(() => {
+        if (selectedIndex == null) return;
+        if (normalizedImages.length === 0) close();
+        if (selectedIndex > normalizedImages.length - 1) {
+            setSelectedIndex(normalizedImages.length - 1);
+        }
+    }, [close, normalizedImages.length, selectedIndex]);
+
+    return (
+        <Visibility.mount visible={normalizedImages.length > 0}>
+            <Variant
+                {...rest}
+                images={normalizedImages}
+                selectedIndex={selectedIndex}
+                selectedImage={isOpen ? normalizedImages[selectedIndex] : null}
+                isOpen={isOpen}
+                canGoPrevious={isOpen && selectedIndex > 0}
+                canGoNext={isOpen && selectedIndex < normalizedImages.length - 1}
+                onSelect={setSelectedIndex}
+                onClose={close}
+                onPrevious={previous}
+                onNext={next}
+            />
+        </Visibility.mount>
+    );
+};

package/src/libs/ImageGalery/_Base.test.jsx

@@ -0,0 +1,66 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Base, normalizeGalleryImages } from "./_Base";
+import { IMAGE_CATALOG_GLOBAL_KEY } from "../createImageCatalog";
+import { baseStore } from "../baseStore";
+
+describe("ImageGalery", () => {
+    it("normalizes catalog keys, paths, and image sets", () => {
+        const imageSet = {
+            small: { src: "/small.jpg", naturalWidth: 320, naturalHeight: 200 },
+            large: { src: "/large.jpg", naturalWidth: 1600, naturalHeight: 1000 },
+        };
+
+        expect(
+            normalizeGalleryImages([
+                "i5283",
+                "/photo.jpg",
+                { externalSet: imageSet, alt: "Museum" },
+            ]),
+        ).toEqual([
+            {
+                key: "i5283-0",
+                alt: undefined,
+                full: { catalogSet: "i5283" },
+                thumbnail: { catalogSet: "i5283" },
+            },
+            {
+                key: "/photo.jpg-1",
+                alt: undefined,
+                full: { src: "/photo.jpg" },
+                thumbnail: { src: "/photo.jpg" },
+            },
+            {
+                key: "gallery-image-2",
+                alt: "Museum",
+                full: { externalSet: imageSet },
+                thumbnail: { externalSet: imageSet },
+            },
+        ]);
+    });
+
+    it("resolves alt from the image catalog for catalog keys", () => {
+        baseStore.globalData.set?.((s) => {
+            s[IMAGE_CATALOG_GLOBAL_KEY] = {
+                i5283: { alt: { tr: "Müze", en: "Museum" } },
+            };
+        });
+
+        expect(normalizeGalleryImages(["i5283"])[0].alt).toEqual({
+            tr: "Müze",
+            en: "Museum",
+        });
+
+        baseStore.globalData.set?.((s) => {
+            s[IMAGE_CATALOG_GLOBAL_KEY] = {};
+        });
+    });
+
+    it("does not mount its variant without images", () => {
+        const Variant = vi.fn(() => <div>Gallery</div>);
+        const { container } = render(<Base images={[]} Variant={Variant} />);
+
+        expect(container).toBeEmptyDOMElement();
+        expect(Variant).not.toHaveBeenCalled();
+    });
+});

package/src/libs/ImageGalery/_dS.jsx

@@ -0,0 +1,71 @@
+import Ds from "../DesignSystem";
+import { ImageGalery } from ".";
+import { SYS } from "../../constants/SYS";
+
+const sampleImages = [
+    "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee",
+    "https://images.unsplash.com/photo-1470770841072-f978cf4d019e",
+    "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
+];
+
+const X = () => (
+    <Ds.page
+        title="<ImageGalery>"
+        releasedOn="1.0.0"
+        description={{ tr: "Tam boyutlu PopUp görüntüleyicisi olan thumbnail galerisi. Thumbnail'ler viewport'a sığdığında ScrollFlex kullanılmadan alignX ile hizalanırlar (varsayılan center); taşma yatay scroll'u etkinleştirir.", en: "Thumbnail gallery with a full-size PopUp viewer. When thumbs fit the viewport they align via alignX (default center) without ScrollFlex; overflow enables horizontal scrolling." }}
+    >
+        <Ds.block
+            title="Amedist"
+            description={{ tr: "String'ler doğrudan path/URL veya image-catalog anahtarı olabilir. Image source nesneleri ve external image set'leri de desteklenir.", en: "Strings may be direct paths/URLs or image-catalog keys. Image source objects and external image sets are also supported." }}
+            code={`import { ImageGalery } from "${SYS.basePath}";
+
+                    <ImageGalery images={[
+                        "/images/photo-1.jpg",
+                        "i5283",
+                        { externalSet: imageSet, alt: "Museum detail" }
+                    ]} />`}
+            example={<ImageGalery images={sampleImages} />}
+        />
+        <Ds.block
+            title="alignX"
+            description={{ tr: "Tüm thumbnail'ler viewport'a sığdığında ScrollFlex atlanır ve thumbnail'ler alignX ile hizalanır (varsayılan center). left/start ve right/end alias'tır. Taşma yine yatay scroll'u etkinleştirir.", en: "When all thumbnails fit the viewport, ScrollFlex is skipped and thumbs align with alignX (default center). left/start and right/end are aliases. Overflow still enables horizontal scrolling." }}
+            code={`import { ImageGalery } from "${SYS.basePath}";
+
+                    <ImageGalery images={images} alignX="center" />
+                    <ImageGalery images={images} alignX="start" />`}
+            example={<ImageGalery images={sampleImages} alignX="center" />}
+        />
+        <Ds.api
+            args="<ImageGalery />"
+            props={{
+                images: {
+                    description: { tr: "Doğrudan path'ler, URL'ler, image catalog anahtarları, Image props nesneleri veya external image set'leri. Alt, item'dan veya catalog anahtarlarında image catalog'dan gelir; varsa PopUp içinde t(alt) olarak gösterilir.", en: "Direct paths, URLs, image catalog keys, Image props objects, or external image sets. Alt comes from the item or, for catalog keys, from the image catalog; it is shown as t(alt) in the PopUp when present." },
+                    type: "array",
+                    required: true,
+                },
+                thumbnailHeight: {
+                    description: { tr: "Ortak thumbnail satır yüksekliği. Genişlik her görselin aspect ratio'sunu izler.", en: "Shared thumbnail row height. Width follows each image aspect ratio." },
+                    type: "number",
+                    defaultValue: "150",
+                },
+                gap: {
+                    description: { tr: "Thumbnail'ler arasındaki boşluk.", en: "Space between thumbnails." },
+                    type: "number",
+                    defaultValue: "10",
+                },
+                alignX: {
+                    description: { tr: "Thumbnail'ler scroll olmadan sığdığında yatay hizalama. center | start | end (left→start, right→end). ScrollFlex yalnızca içerik taştığında kullanılır.", en: "Horizontal alignment when thumbnails fit without scrolling. center | start | end (left→start, right→end). ScrollFlex is used only when content overflows." },
+                    type: '"center" | "start" | "end" | "left" | "right"',
+                    defaultValue: '"center"',
+                },
+                marginToEdge: {
+                    description: { tr: "Thumbnail satırı scroll olduğunda baştaki/sondaki boşluk (tüm thumbnail'ler sığdığında yok sayılır).", en: "Leading/trailing spacer when the thumbnail row scrolls (ignored when all thumbs fit)." },
+                    type: "number | string",
+                    defaultValue: "150",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/ImageGalery/index.jsx

@@ -0,0 +1,23 @@
+import { Base } from "./_Base";
+import Amedist from "./Amedist";
+
+const variants = {
+    amedist: Amedist,
+};
+
+const defaultVariantKey = "amedist";
+
+export const ImageGalery = ({ variant = defaultVariantKey, ...props } = {}) => {
+    const Variant = variants[variant] || variants[defaultVariantKey];
+    return <Base {...props} Variant={Variant} />;
+};
+
+Object.entries(variants).forEach(([key, Variant]) => {
+    const Preset = (props) => <Base {...props} Variant={Variant} />;
+    Preset.displayName = `ImageGalery.${key}`;
+    ImageGalery[key] = Preset;
+});
+
+ImageGalery.displayName = "ImageGalery";
+
+export const ImageGallery = ImageGalery;

package/src/libs/Layout/ControllerError.jsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { Icon } from "../Icon";
+
+const Root = styled.div`
+    width: 100%;
+    min-height: 70rem;
+    box-sizing: border-box;
+    padding: 20rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rem;
+    color: ${({ theme }) => theme.error || theme.foreground};
+    background: ${({ theme }) => theme.colorAlpha(theme.background, 90)};
+    border: 1px solid currentColor;
+    font-size: 14rem;
+    line-height: 1.4;
+`;
+
+export const ControllerError = ({ controllerName, controllerId }) => (
+    <Root role="alert" data-layout-controller-error={`${controllerName}:${controllerId}`}>
+        <Icon icon="warning" width={20} color="inherit" flat />
+        <span>
+            Multiple same controllerId usage. Check your code or contact with a developer. (
+            {controllerName}:{controllerId})
+        </span>
+    </Root>
+);

package/src/libs/Layout/_dS_footerAmedist.jsx

@@ -0,0 +1,62 @@
+import Ds from "../DesignSystem";
+
+const X = () => (
+    <Ds.page
+        title="<Layout.footerAmedist>"
+        releasedOn="1.0.0"
+        description={{
+            tr: "Logo, links ve credit slotlarından oluşan Amedist footer varyantıdır.",
+            en: "Amedist footer variant composed of logo, links, and credit slots.",
+        }}
+    >
+        <Ds.block
+            title={{ tr: "Temel kullanım", en: "Basic usage" }}
+            code={`<Layout.footerAmedist
+    minHeight="100vh"
+    logo={<Logo />}
+    links={<Links />}
+    credit={<Credit />}
+/>`}
+        />
+        <Ds.api
+            args="<Layout.footerAmedist />"
+            props={{
+                minHeight: {
+                    description: {
+                        tr: "Number gelirse rem olarak normalize edilen minimum yükseklik.",
+                        en: "Minimum height; numeric values are normalized as rem.",
+                    },
+                    type: "number | string",
+                    defaultValue: "100vh",
+                },
+                logo: { description: { tr: "Logo slotu.", en: "Logo slot." }, type: "ReactNode" },
+                links: {
+                    description: { tr: "Links slotu.", en: "Links slot." },
+                    type: "ReactNode",
+                },
+                credit: {
+                    description: { tr: "Credit slotu.", en: "Credit slot." },
+                    type: "ReactNode",
+                },
+                controllerId: {
+                    description: {
+                        tr: "Bu footer controller instance'ının benzersiz kimliği.",
+                        en: "Unique identity of this footer controller instance.",
+                    },
+                    type: "string",
+                    defaultValue: "default",
+                },
+                visible: {
+                    description: {
+                        tr: "Layout ortak Visibility preserve kontrolü.",
+                        en: "Shared Layout Visibility preserve control.",
+                    },
+                    type: "boolean",
+                    defaultValue: "true",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;