@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/StoryTeller/Amedist/useVars.js

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { baseStore } from "../../baseStore";
+import { useLayout } from "../../Layout";
+import { useManageSearchParams } from "../../useSearchParams";
+
+const SEARCH_PARAM_OPTIONS = {
+    setDefaultsOnMount: false,
+    disableBase64: true,
+    disableTypeControl: true,
+    replace: true,
+};
+
+const isEditableTarget = (target) => {
+    if (!target || typeof target !== "object") return false;
+    const tagName = target.tagName?.toLowerCase();
+    return (
+        tagName === "input" ||
+        tagName === "textarea" ||
+        tagName === "select" ||
+        target.isContentEditable
+    );
+};
+
+export const normalizeSlideNumber = (value, slideCount) => {
+    const number = Number(value);
+    if (!Number.isInteger(number) || number < 1 || number > slideCount) return 1;
+    return number;
+};
+
+export const useVars = ({ stories = [] } = {}) => {
+    const isPhone = baseStore.useGlobal((state) =>
+        Boolean(state._clientData?.isMobile || state._clientData?.isOutOfRatio),
+    );
+    const storyList = Array.isArray(stories) ? stories : [];
+    const slideCount = storyList.length;
+    const navigate = useNavigate();
+    const rootRef = useRef(null);
+    const layoutSourceRef = useRef(Symbol("StoryTeller.amedist"));
+    const previousSlideNumberRef = useRef(1);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [loadedSlideNumber, setLoadedSlideNumber] = useState(null);
+    const [searchParams, setSearchParams] = useManageSearchParams(SEARCH_PARAM_OPTIONS);
+    const [headerController, footerController] = useLayout(["headerAmedist", "footerAmedist"]);
+
+    const slideNumber = slideCount > 0 ? normalizeSlideNumber(searchParams.slide, slideCount) : 0;
+    const activeIndex = slideNumber > 0 ? slideNumber - 1 : -1;
+    const activeStory = activeIndex >= 0 ? storyList[activeIndex] : null;
+    const direction = slideNumber < previousSlideNumberRef.current ? "backward" : "forward";
+    const canGoPrevious = slideNumber > 1;
+    const canGoNext = slideNumber > 0 && slideNumber < slideCount;
+    const previousIndex = canGoPrevious ? activeIndex - 1 : -1;
+    const previousStory = previousIndex >= 0 ? storyList[previousIndex] : null;
+    const nextIndex = canGoNext ? activeIndex + 1 : -1;
+    const nextStory = nextIndex >= 0 ? storyList[nextIndex] : null;
+    const shouldPreloadAdjacent = !activeStory?.image || loadedSlideNumber === slideNumber;
+    const preloadStories = shouldPreloadAdjacent
+        ? [
+              { story: previousStory, index: previousIndex },
+              { story: nextStory, index: nextIndex },
+          ].filter(({ story }) => Boolean(story))
+        : [];
+    const canFullscreen =
+        !isPhone &&
+        typeof document !== "undefined" &&
+        typeof document.documentElement?.requestFullscreen === "function";
+
+    useEffect(() => {
+        if (slideCount < 1) return;
+        const numberFromUrl = Number(searchParams.slide);
+        const isValid =
+            Number.isInteger(numberFromUrl) && numberFromUrl >= 1 && numberFromUrl <= slideCount;
+        if (isValid) return;
+
+        setSearchParams((current) => ({ ...current, slide: 1 }));
+    }, [searchParams.slide, setSearchParams, slideCount]);
+
+    useEffect(() => {
+        previousSlideNumberRef.current = slideNumber;
+    }, [slideNumber]);
+
+    useEffect(() => {
+        if (slideCount < 1) return undefined;
+        const source = layoutSourceRef.current;
+        headerController.hideHeader?.(source);
+        footerController.hideFooter?.(source);
+
+        return () => {
+            headerController.showHeader?.(source);
+            footerController.showFooter?.(source);
+        };
+    }, [
+        footerController.hideFooter,
+        footerController.showFooter,
+        headerController.hideHeader,
+        headerController.showHeader,
+        slideCount,
+    ]);
+
+    useEffect(() => {
+        if (isPhone || typeof document === "undefined") return undefined;
+        const onFullscreenChange = () => setIsFullscreen(Boolean(document.fullscreenElement));
+        onFullscreenChange();
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, [isPhone]);
+
+    const goToSlide = useCallback(
+        (nextSlideNumber) => {
+            if (nextSlideNumber < 1 || nextSlideNumber > slideCount) return;
+            setSearchParams((current) => ({ ...current, slide: nextSlideNumber }));
+        },
+        [setSearchParams, slideCount],
+    );
+
+    // A new mobile slide starts at the top of the document, not at the
+    // previous slide's scroll offset. Desktop retains its viewport layout.
+    useEffect(() => {
+        if (isPhone) rootRef.current?.scrollIntoView?.({ block: "start", behavior: "instant" });
+    }, [isPhone, slideNumber]);
+
+    const goPrevious = useCallback(() => goToSlide(slideNumber - 1), [goToSlide, slideNumber]);
+    const goNext = useCallback(() => goToSlide(slideNumber + 1), [goToSlide, slideNumber]);
+    const handleActiveImageLoad = useCallback(
+        () => setLoadedSlideNumber(slideNumber),
+        [slideNumber],
+    );
+
+    useEffect(() => {
+        if (isPhone || slideCount <= 1) return undefined;
+
+        const onKeyDown = (event) => {
+            if (
+                event.defaultPrevented ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.shiftKey ||
+                isEditableTarget(event.target)
+            )
+                return;
+
+            if (event.key === "ArrowLeft" && canGoPrevious) {
+                event.preventDefault();
+                goPrevious();
+            }
+            if (event.key === "ArrowRight" && canGoNext) {
+                event.preventDefault();
+                goNext();
+            }
+        };
+
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [canGoNext, canGoPrevious, goNext, goPrevious, slideCount, isPhone]);
+
+    const toggleFullscreen = useCallback(async () => {
+        if (!canFullscreen || typeof document === "undefined") return;
+        try {
+            if (document.fullscreenElement) await document.exitFullscreen();
+            else await rootRef.current?.requestFullscreen?.();
+        } catch {
+            setIsFullscreen(Boolean(document.fullscreenElement));
+        }
+    }, [canFullscreen]);
+
+    const close = useCallback(async () => {
+        try {
+            if (typeof document !== "undefined" && document.fullscreenElement) {
+                await document.exitFullscreen();
+            }
+        } catch {
+            // Navigation still closes StoryTeller when the browser rejects exitFullscreen.
+        } finally {
+            navigate("/");
+        }
+    }, [navigate]);
+
+    useEffect(() => {
+        if (isPhone || slideCount < 1 || typeof window === "undefined") return undefined;
+
+        const onKeyDown = (event) => {
+            if (event.defaultPrevented || event.key !== "Escape") return;
+            event.preventDefault();
+            void close();
+        };
+
+        window.addEventListener("keydown", onKeyDown, true);
+        return () => window.removeEventListener("keydown", onKeyDown, true);
+    }, [close, slideCount, isPhone]);
+
+    return {
+        rootRef,
+        activeStory,
+        activeIndex,
+        preloadStories,
+        slideNumber,
+        slideCount,
+        direction,
+        canGoPrevious,
+        canGoNext,
+        canFullscreen,
+        isFullscreen,
+        close,
+        goPrevious,
+        goNext,
+        handleActiveImageLoad,
+        toggleFullscreen,
+    };
+};

package/src/libs/StoryTeller/Amedist/useVars.test.js

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { normalizeSlideNumber } from "./useVars";
+
+describe("StoryTeller.amedist slide number", () => {
+    it.each([
+        [undefined, 4, 1],
+        ["", 4, 1],
+        ["not-a-number", 4, 1],
+        [0, 4, 1],
+        [-1, 4, 1],
+        [5, 4, 1],
+        [1.5, 4, 1],
+        ["2", 4, 2],
+        [3, 4, 3],
+    ])("normalizes %p with %i slides to %i", (value, slideCount, expected) => {
+        expect(normalizeSlideNumber(value, slideCount)).toBe(expected);
+    });
+});

package/src/libs/StoryTeller/AmedistHorizontalLeft/index.jsx

@@ -0,0 +1,147 @@
+import { Image } from "../../Image";
+import styled, { css } from "styled-components";
+import { normalizeStoryText, StoryTextList } from "../textItems";
+
+const S = {
+    container: styled.article`
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 11fr 5fr;
+        grid-template-rows: minmax(100vh, auto);
+        width: 100%;
+        height: 100vh;
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        pointer-events: auto;
+        isolation: isolate;
+        background: ${({ theme }) => theme.background};
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    position: relative;
+                    inset: auto;
+                    display: flex;
+                    flex-direction: column;
+                    height: auto;
+                    min-height: 0;
+                    overflow: visible;
+                    overscroll-behavior: auto;
+                `,
+            )};
+    `,
+    imageArea: styled.div`
+        position: sticky;
+        top: 0;
+        min-width: 0;
+        height: 100vh;
+        box-sizing: border-box;
+        align-self: start;
+        z-index: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    position: relative;
+                    top: auto;
+                    width: 100%;
+                    height: auto;
+                    min-height: 0;
+                    && > span {
+                        width: 100%;
+                        height: auto;
+                    }
+                    && img {
+                        width: 100%;
+                        height: auto;
+                        max-height: none;
+                    }
+                `,
+            )};
+    `,
+    textArea: styled.div`
+        position: relative;
+        min-width: 0;
+        min-height: 100vh;
+        height: max-content;
+        box-sizing: border-box;
+        padding: 100rem 60rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: safe flex-end;
+        gap: 0;
+
+        & > * {
+            flex-shrink: 0;
+        }
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    width: 100%;
+                    min-height: 0;
+                    height: auto;
+                    padding: 35rem 25px;
+                    justify-content: flex-start;
+                `,
+            )};
+    `,
+    largeSlideNumber: styled.span`
+        position: absolute;
+        top: 50rem;
+        left: 50rem;
+        z-index: 2;
+        pointer-events: none;
+        font-weight: 100;
+        opacity: 0.06;
+        font-size: 1250%;
+        line-height: 0.7;
+        letter-spacing: -0.05em;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    display: none;
+                `,
+            )};
+    `,
+};
+
+const AmedistHorizontalLeft = ({ story = {}, index, slideNumber, slideCount, onImageLoad }) => {
+    const textList = normalizeStoryText(story.text);
+
+    return (
+        <S.container
+            data-slide-design="amedistHorizontalLeft"
+            data-slide-index={index}
+            data-slide-number={slideNumber}
+            data-slide-count={slideCount}
+        >
+            <S.imageArea data-slot="image">
+                {story.image && (
+                    <Image
+                        catalogSet={story.image}
+                        alt=""
+                        objectFit="contain"
+                        w="100%"
+                        h="auto"
+                        onLoad={onImageLoad}
+                    />
+                )}
+            </S.imageArea>
+            <S.textArea data-slot="text">
+                <S.largeSlideNumber aria-hidden="true">{slideNumber}</S.largeSlideNumber>
+                <StoryTextList items={textList} balance marginBottom={20} />
+            </S.textArea>
+        </S.container>
+    );
+};
+
+export default AmedistHorizontalLeft;

package/src/libs/StoryTeller/AmedistHorizontalRight/index.jsx

@@ -0,0 +1,147 @@
+import { Image } from "../../Image";
+import styled, { css } from "styled-components";
+import { normalizeStoryText, StoryTextList } from "../textItems";
+
+const S = {
+    container: styled.article`
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 5fr 11fr;
+        grid-template-rows: minmax(100vh, auto);
+        width: 100%;
+        height: 100vh;
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        pointer-events: auto;
+        isolation: isolate;
+        background: ${({ theme }) => theme.background};
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    position: relative;
+                    inset: auto;
+                    display: flex;
+                    flex-direction: column;
+                    height: auto;
+                    min-height: 0;
+                    overflow: visible;
+                    overscroll-behavior: auto;
+                `,
+            )};
+    `,
+    textArea: styled.div`
+        position: relative;
+        min-width: 0;
+        min-height: 100vh;
+        height: max-content;
+        box-sizing: border-box;
+        padding: 100rem 60rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 0;
+
+        & > * {
+            flex-shrink: 0;
+        }
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    width: 100%;
+                    min-height: 0;
+                    height: auto;
+                    padding: 35rem 25px;
+                    justify-content: flex-start;
+                `,
+            )};
+    `,
+    imageArea: styled.div`
+        position: sticky;
+        top: 0;
+        min-width: 0;
+        height: 100vh;
+        box-sizing: border-box;
+        align-self: start;
+        z-index: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    position: relative;
+                    top: auto;
+                    width: 100%;
+                    height: auto;
+                    min-height: 0;
+                    && > span {
+                        width: 100%;
+                        height: auto;
+                    }
+                    && img {
+                        width: 100%;
+                        height: auto;
+                        max-height: none;
+                    }
+                `,
+            )};
+    `,
+    largeSlideNumber: styled.span`
+        position: absolute;
+        bottom: 50rem;
+        right: 50rem;
+        z-index: 2;
+        pointer-events: none;
+        font-weight: 100;
+        opacity: 0.06;
+        font-size: 1250%;
+        line-height: 0.7;
+        letter-spacing: -0.05em;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    display: none;
+                `,
+            )};
+    `,
+};
+
+const AmedistHorizontalRight = ({ story = {}, index, slideNumber, slideCount, onImageLoad }) => {
+    const textList = normalizeStoryText(story.text);
+
+    return (
+        <S.container
+            data-slide-design="amedistHorizontalRight"
+            data-slide-index={index}
+            data-slide-number={slideNumber}
+            data-slide-count={slideCount}
+        >
+            <S.textArea data-slot="text">
+                <S.largeSlideNumber aria-hidden="true">{slideNumber}</S.largeSlideNumber>
+                <StoryTextList items={textList} balance marginBottom={20} />
+            </S.textArea>
+            <S.imageArea data-slot="image">
+                {story.image && (
+                    <Image
+                        catalogSet={story.image}
+                        alt=""
+                        objectFit="contain"
+                        w="100%"
+                        h="auto"
+                        onLoad={onImageLoad}
+                    />
+                )}
+            </S.imageArea>
+        </S.container>
+    );
+};
+
+export default AmedistHorizontalRight;