@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/@Base/styling/useTheme.js

@@ -0,0 +1,137 @@
+import { useMemo, useCallback, useEffect } from "react";
+import { baseStore } from "../../baseStore";
+import { DEFAULT_THEME } from "../../../constants/DEFAULT_THEME";
+import { buildThemeWithScales, packTheme } from "../../COLORS/themeScales";
+
+export const useTheme = ({ theme } = {}) => {
+    const {
+        theme: currentColors,
+        currentThemeKey,
+        currentThemeLabelObj,
+        set,
+    } = baseStore.useLocal({
+        theme: {},
+        currentThemeKey: null,
+        currentThemeLebelObj: null,
+    });
+
+    const preparedThemes = useMemo(() => {
+        const input = theme && typeof theme === "object" ? theme : {};
+        const keys = Object.keys(input);
+
+        const pickColorsOnly = (t) => {
+            if (!t || typeof t !== "object") return {};
+            const { _props, ...rest } = t;
+            return rest || {};
+        };
+
+        const defaultKey = keys.find((k) => input?.[k]?._props?.isDefault) || keys[0] || "default";
+
+        const defaultThemeColors = pickColorsOnly(input[defaultKey]);
+        const basePaletteRaw = { ...(DEFAULT_THEME || {}), ...(defaultThemeColors || {}) };
+
+        const out = {};
+        for (const k of keys) {
+            const t = input[k] || {};
+            const colorsRaw = pickColorsOnly(t);
+
+            const mergedRaw = { ...basePaletteRaw, ...colorsRaw };
+            const built = buildThemeWithScales(mergedRaw);
+
+            out[k] = {
+                _props: {
+                    ...(t._props || {}),
+                    ...(k === defaultKey ? { isDefault: true } : {}),
+                },
+                ...packTheme(built),
+            };
+        }
+
+        if (!out[defaultKey]) {
+            const built = buildThemeWithScales(basePaletteRaw);
+            out[defaultKey] = {
+                _props: { isDefault: true, label: { tr: "Varsayılan", en: "Default" } },
+                ...packTheme(built),
+            };
+        }
+
+        out._meta = { defaultKey, basePalette: basePaletteRaw };
+
+        return out;
+    }, [theme]);
+
+    const selectedKey = useMemo(() => {
+        const storedKey = baseStore.globalData.get?.()?.currentThemeLabel;
+        const defaultKey = preparedThemes?._meta?.defaultKey;
+        if (storedKey && preparedThemes?.[storedKey]) return storedKey;
+        return defaultKey;
+    }, [preparedThemes]);
+
+    // `useLocal` starts empty and is synchronised in an effect below. Returning
+    // the prepared default synchronously prevents the first production paint from
+    // receiving an empty styled-components theme.
+    const resolvedTheme = useMemo(() => {
+        if (Object.keys(currentColors || {}).length > 0) return currentColors;
+
+        const selectedTheme = preparedThemes?.[selectedKey];
+        if (!selectedTheme) return {};
+
+        const { _props, ...themePacked } = selectedTheme;
+        return themePacked;
+    }, [currentColors, preparedThemes, selectedKey]);
+
+    useEffect(() => {
+        const t = preparedThemes?.[selectedKey];
+        if (!t) return;
+
+        const { _props, ...themePacked } = t;
+
+        set?.({
+            theme: themePacked,
+            currentThemeKey: selectedKey,
+            currentThemeLabelObj: _props?.label || null,
+        });
+    }, [preparedThemes, selectedKey, set]);
+
+    const setTheme = useCallback(
+        (themeKey) => {
+            const next = preparedThemes?.[themeKey];
+
+            const fallbackKey =
+                Object.keys(preparedThemes || {}).find(
+                    (k) => preparedThemes?.[k]?._props?.isDefault,
+                ) || preparedThemes?._meta?.defaultKey;
+
+            const chosen = next || preparedThemes?.[fallbackKey];
+            if (!chosen) return;
+
+            const { _props, ...themePacked } = chosen;
+
+            set?.({
+                theme: themePacked,
+                currentThemeKey: themeKey,
+                currentThemeLabelObj: _props?.label || null,
+            });
+
+            baseStore.globalData.set?.({
+                theme: themePacked,
+                currentThemeLabel: themeKey,
+                isThemeReady: true,
+            });
+        },
+        [preparedThemes, set],
+    );
+
+    useEffect(() => {
+        baseStore.globalData.set?.({
+            theme: resolvedTheme,
+            currentThemeLabel: currentThemeKey,
+            currentThemeLabelObj,
+            setTheme,
+            themes: preparedThemes,
+            isThemeReady: Object.keys(resolvedTheme).length > 0,
+        });
+    }, [resolvedTheme, currentThemeKey, currentThemeLabelObj, setTheme, preparedThemes]);
+
+    return { theme: resolvedTheme };
+};

package/src/libs/@Base/useEffects/index.js

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { logReferrers } from "../../logReferrers";
+import { createBaseDatePackage } from "../../baseDate/createBaseDatePackage";
+import { baseStore } from "../../baseStore";
+import { useTimer } from "../../useTimer";
+
+export const useEffects = () => {
+    const [_baseDate = {}, set] = baseStore.useGlobal((s) => [s._baseDate, s.set]);
+
+
+    useEffect(() => {
+        window.console.ref = logReferrers;
+    }, []);
+
+
+    const startTimeout = () => {
+        const timezone = _baseDate?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const datePackage = createBaseDatePackage({ timezone });
+
+        set((s) => {
+            s._baseDate.package = datePackage;
+        });
+
+        const getHoursAndMinutes = (tsTillEndOfDay) => {
+            const hours = Math.floor(tsTillEndOfDay / 3600000);
+            const minutes = Math.floor((tsTillEndOfDay % 3600000) / 60000);
+            return `${hours}h ${minutes}m`;
+        };
+        console.log(
+            `[baseDate] is up to date. Today: ${datePackage.today.defaultString}. It is valid for ${getHoursAndMinutes(datePackage.tsTillEndOfDay)}.`,
+        );
+        start({ refreshTime: datePackage.tsTillEndOfDay });
+    };
+    const { start } = useTimer({
+        timerName: "BaseDateProvider",
+        loop: false,
+        onEnd: startTimeout,
+        startOnLoad: false,
+    });
+    useEffect(() => {
+        startTimeout();
+    }, []);
+
+
+    return null;
+};

package/src/libs/BlockBuilder/Amedist/_styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const S = {
+    container: styled.section`
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        box-sizing: border-box;
+        color: ${({ theme }) => theme.foreground};
+    `,
+};
+
+export default S;

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

@@ -0,0 +1,34 @@
+import { Fragment } from "react";
+import { Space } from "../../Space";
+import AmedistHorizontalLeft from "../amedistHorizontalLeft";
+import AmedistHorizontalRight from "../amedistHorizontalRight";
+import AmedistVertical from "../amedistVertical";
+import S from "./_styled";
+
+const defaultBlockDesign = "amedistHorizontalRight";
+const blockDesigns = {
+    amedistHorizontalLeft: AmedistHorizontalLeft,
+    amedistHorizontalRight: AmedistHorizontalRight,
+    amedistVertical: AmedistVertical,
+};
+
+const Amedist = ({ blocks = [], space = 150, ...rest }) => {
+    if (!Array.isArray(blocks) || blocks.length === 0) return null;
+
+    return (
+        <S.container {...rest} data-block-builder="amedist">
+            {blocks.map((block, index) => {
+                const Block = blockDesigns[block?.slideDesign] || blockDesigns[defaultBlockDesign];
+
+                return (
+                    <Fragment key={`${block?.slideDesign || defaultBlockDesign}-${index}`}>
+                        <Block block={block} index={index} />
+                        {index < blocks.length - 1 && <Space size={space} />}
+                    </Fragment>
+                );
+            })}
+        </S.container>
+    );
+};
+
+export default Amedist;

package/src/libs/BlockBuilder/_dS.jsx

@@ -0,0 +1,85 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { BlockBuilder } from ".";
+import sampleSrc from "../Image/assets/sample-landscape.svg";
+
+const imageProps = {
+    src: sampleSrc,
+    alt: "BlockBuilder sample",
+};
+
+const blocks = [
+    {
+        slideDesign: "amedistHorizontalRight",
+        text: [
+            { as: "h3", data: "Horizontal Right" },
+            "Metin solda ve aşağıda; görsel sağda konumlanır.",
+        ],
+        imageProps,
+    },
+    {
+        slideDesign: "amedistHorizontalLeft",
+        text: [
+            { as: "h3", data: "Horizontal Left" },
+            "Görsel solda; metin sağda ve yukarıda konumlanır.",
+        ],
+        imageProps,
+    },
+    {
+        slideDesign: "amedistVertical",
+        text: ["Sol metin alanı yukarı hizalanır.", "İkinci metin alanı sağda ve aşağı hizalanır."],
+        imageProps,
+    },
+];
+
+const X = () => (
+    <Ds.page
+        title="<BlockBuilder>"
+        releasedOn="1.0.0"
+        description={{
+            tr: "Story slide verisini sayfa içinde alt alta sıralanan içerik blocklarına dönüştürür.",
+            en: "Converts story slide data into content blocks stacked within the page.",
+        }}
+    >
+        <Ds.block
+            title={{ tr: "Amedist", en: "Amedist" }}
+            description={{
+                tr: "slideDesign alanı üç yerleşimden birini seçer: amedistHorizontalRight, amedistHorizontalLeft veya amedistVertical.",
+                en: "The slideDesign field selects one of three layouts: amedistHorizontalRight, amedistHorizontalLeft, or amedistVertical.",
+            }}
+            code={`import { BlockBuilder } from "${SYS.basePath}";
+
+const blocks = [{
+    slideDesign: "amedistHorizontalRight",
+    text: ["..."],
+    image: "catalogImageId",
+}];
+
+<BlockBuilder.amedist blocks={blocks} space={150} />`}
+            example={<BlockBuilder.amedist blocks={blocks} />}
+        />
+        <Ds.api
+            args="<BlockBuilder.amedist />"
+            props={{
+                blocks: {
+                    description: {
+                        tr: "slideDesign, text ve image alanlarını taşıyan block listesi.",
+                        en: "List of blocks containing slideDesign, text, and image fields.",
+                    },
+                    type: "array",
+                    required: true,
+                },
+                space: {
+                    description: {
+                        tr: "Block'lar arasındaki boşluk. Number değerler rem olarak uygulanır. Varsayılan: 150rem.",
+                        en: "Spacing between blocks. Number values are applied as rem. Default: 150rem.",
+                    },
+                    type: "number | string",
+                    defaultValue: "150",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/BlockBuilder/amedistHorizontalLeft/_styled.js

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+
+const motionArea = styled.div`
+    min-width: 0;
+    display: flex;
+    align-items: center;
+`;
+
+const S = {
+    container: styled.article`
+        position: relative;
+        isolation: isolate;
+        width: 100%;
+        min-height: 64vh;
+        padding: 0 150rem;
+        display: grid;
+        grid-template-columns: 11fr 5fr;
+        align-items: center;
+        box-sizing: border-box;
+
+        @media (max-width: 700px) {
+            width: 100%;
+            padding: 0 24rem;
+            min-height: 0;
+            grid-template-columns: minmax(0, 1fr);
+            gap: 30rem;
+        }
+    `,
+    imageMotion: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 1;
+        height: clamp(300rem, 64vh, 680rem);
+
+        & > * {
+            width: 100%;
+            height: 100%;
+        }
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 2;
+            height: auto;
+        }
+    `,
+    imageArea: styled.div`
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        & > *,
+        & img {
+            width: 100%;
+            height: 100%;
+        }
+
+        @media (max-width: 700px) {
+            aspect-ratio: 3 / 2;
+        }
+    `,
+    textMotion: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 2;
+        align-self: center;
+        align-items: center;
+        padding: 0 32rem;
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 1;
+            padding: 20rem 0;
+        }
+    `,
+    textArea: styled.div`
+        width: 100%;
+        min-width: 0;
+
+        & > :last-child {
+            margin-bottom: 0;
+        }
+    `,
+};
+
+export default S;

package/src/libs/BlockBuilder/amedistHorizontalLeft/index.jsx

@@ -0,0 +1,43 @@
+import { Image } from "../../Image";
+import { ParalaxItem } from "../../ParalaxItem";
+import { ScrollAnimatedItem } from "../../ScrollAnimatedItem";
+import { StoryTextList, normalizeStoryText } from "../../StoryTeller/textItems";
+import S from "./_styled";
+
+const AmedistHorizontalLeft = ({ block = {}, index }) => {
+    const textList = normalizeStoryText(block.text);
+
+    return (
+        <S.container data-block-design="amedistHorizontalLeft" data-block-index={index}>
+            <S.imageMotion>
+                <ScrollAnimatedItem animationMs={1000} distance={0}>
+                    <ParalaxItem.speed speed={25}>
+                        <S.imageArea>
+                            {(block.image || block.imageProps) && (
+                                <Image
+                                    {...(block.imageProps || { catalogSet: block.image })}
+                                    alt=""
+                                    w="100%"
+                                    h="100%"
+                                    objectFit="cover"
+                                    loadInViewport
+                                />
+                            )}
+                        </S.imageArea>
+                    </ParalaxItem.speed>
+                </ScrollAnimatedItem>
+            </S.imageMotion>
+            <S.textMotion>
+                <ScrollAnimatedItem animationMs={1000} distance={0}>
+                    <ParalaxItem.speed speed={-25}>
+                        <S.textArea>
+                            <StoryTextList items={textList} balance marginBottom={20} />
+                        </S.textArea>
+                    </ParalaxItem.speed>
+                </ScrollAnimatedItem>
+            </S.textMotion>
+        </S.container>
+    );
+};
+
+export default AmedistHorizontalLeft;

package/src/libs/BlockBuilder/amedistHorizontalRight/_styled.js

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+
+const motionArea = styled.div`
+    min-width: 0;
+    display: flex;
+    align-items: center;
+`;
+
+const S = {
+    container: styled.article`
+        position: relative;
+        isolation: isolate;
+        width: 100%;
+        min-height: 64vh;
+        padding: 0 150rem;
+        display: grid;
+        grid-template-columns: 5fr 11fr;
+        align-items: center;
+        box-sizing: border-box;
+
+        @media (max-width: 700px) {
+            width: 100%;
+            padding: 0 24rem;
+            min-height: 0;
+            grid-template-columns: minmax(0, 1fr);
+            gap: 30rem;
+        }
+    `,
+    textMotion: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 1;
+        align-self: center;
+        align-items: center;
+        padding: 0 32rem;
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 1;
+            padding: 20rem 0;
+        }
+    `,
+    textArea: styled.div`
+        width: 100%;
+        min-width: 0;
+
+        & > :last-child {
+            margin-bottom: 0;
+        }
+    `,
+    imageMotion: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 2;
+        height: clamp(300rem, 64vh, 680rem);
+
+        & > * {
+            width: 100%;
+            height: 100%;
+        }
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 2;
+            height: auto;
+        }
+    `,
+    imageArea: styled.div`
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        & > *,
+        & img {
+            width: 100%;
+            height: 100%;
+        }
+
+        @media (max-width: 700px) {
+            aspect-ratio: 3 / 2;
+        }
+    `,
+};
+
+export default S;

package/src/libs/BlockBuilder/amedistHorizontalRight/index.jsx

@@ -0,0 +1,43 @@
+import { Image } from "../../Image";
+import { ParalaxItem } from "../../ParalaxItem";
+import { ScrollAnimatedItem } from "../../ScrollAnimatedItem";
+import { StoryTextList, normalizeStoryText } from "../../StoryTeller/textItems";
+import S from "./_styled";
+
+const AmedistHorizontalRight = ({ block = {}, index }) => {
+    const textList = normalizeStoryText(block.text);
+
+    return (
+        <S.container data-block-design="amedistHorizontalRight" data-block-index={index}>
+            <S.textMotion>
+                <ScrollAnimatedItem animationMs={1000} distance={0}>
+                    <ParalaxItem.speed speed={-25}>
+                        <S.textArea>
+                            <StoryTextList items={textList} balance marginBottom={20} />
+                        </S.textArea>
+                    </ParalaxItem.speed>
+                </ScrollAnimatedItem>
+            </S.textMotion>
+            <S.imageMotion>
+                <ScrollAnimatedItem animationMs={1000} distance={0}>
+                    <ParalaxItem.speed speed={25}>
+                        <S.imageArea>
+                            {(block.image || block.imageProps) && (
+                                <Image
+                                    {...(block.imageProps || { catalogSet: block.image })}
+                                    alt=""
+                                    w="100%"
+                                    h="100%"
+                                    objectFit="cover"
+                                    loadInViewport
+                                />
+                            )}
+                        </S.imageArea>
+                    </ParalaxItem.speed>
+                </ScrollAnimatedItem>
+            </S.imageMotion>
+        </S.container>
+    );
+};
+
+export default AmedistHorizontalRight;

package/src/libs/BlockBuilder/amedistVertical/_styled.js

@@ -0,0 +1,112 @@
+import styled from "styled-components";
+
+const motionArea = styled.div`
+    min-width: 0;
+    display: flex;
+    align-items: center;
+`;
+
+const S = {
+    container: styled.article`
+        position: relative;
+        isolation: isolate;
+        width: 100%;
+        min-height: 72vh;
+        padding: 0 150rem;
+        display: grid;
+        grid-template-columns: 5fr 6fr 5fr;
+        align-items: center;
+        box-sizing: border-box;
+
+        @media (max-width: 700px) {
+            width: 100%;
+            padding: 0 24rem;
+            min-height: 0;
+            grid-template-columns: minmax(0, 1fr);
+            gap: 30rem;
+        }
+    `,
+    textMotion1: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 1;
+        align-self: center;
+        align-items: center;
+        padding: 0 32rem 0 0;
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 1;
+            padding: 20rem 0;
+        }
+    `,
+    imageMotion: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 2;
+        height: auto;
+        max-height: clamp(380rem, 72vh, 760rem);
+        align-self: center;
+
+        & > * {
+            width: 100%;
+            height: auto;
+            max-height: inherit;
+        }
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 2;
+            max-height: none;
+        }
+    `,
+    imageArea: styled.div`
+        width: 100%;
+        height: auto;
+        max-height: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        & > * {
+            width: 100%;
+            height: auto !important;
+            max-height: inherit;
+        }
+
+        & img {
+            width: 100%;
+            height: auto !important;
+            max-height: inherit;
+            object-fit: contain !important;
+        }
+
+        @media (max-width: 700px) {
+            max-height: none;
+        }
+    `,
+    textMotion2: styled(motionArea)`
+        position: relative;
+        z-index: 1;
+        grid-column: 3;
+        align-self: center;
+        align-items: center;
+        padding: 0 0 0 32rem;
+
+        @media (max-width: 700px) {
+            grid-column: 1;
+            grid-row: 3;
+            padding: 20rem 0;
+        }
+    `,
+    textArea: styled.div`
+        width: 100%;
+        min-width: 0;
+
+        & > :last-child {
+            margin-bottom: 0;
+        }
+    `,
+};
+
+export default S;