@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/LottiePlayer/test.json

@@ -0,0 +1,344 @@
+{
+    "v": "5.6.9",
+    "fr": 25,
+    "ip": 0,
+    "op": 101,
+    "w": 48,
+    "h": 48,
+    "nm": "Composição 1",
+    "ddd": 0,
+    "assets": [],
+    "fonts": {
+        "list": [
+            {
+                "origin": 1,
+                "fPath": "https://fonts.googleapis.com/css2?family=Montserrat:wght@600",
+                "fClass": "font-family: 'Montserrat', sans-serif;",
+                "fFamily": "Montserrat",
+                "fWeight": "600",
+                "fStyle": "SemiBold",
+                "fName": "Montserrat-SemiBold",
+                "ascent": 74.1989135742188
+            }
+        ]
+    },
+    "layers": [
+        {
+            "ddd": 0,
+            "ind": 1,
+            "ty": 5,
+            "nm": "0",
+            "sr": 1,
+            "ks": {
+                "o": { "a": 0, "k": 100, "ix": 11 },
+                "r": { "a": 0, "k": 0, "ix": 10 },
+                "p": { "a": 0, "k": [23.945, 27.5, 0], "ix": 2 },
+                "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+                "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+            },
+            "ao": 0,
+            "t": {
+                "d": {
+                    "x": "var $bm_rt;\nvar beginCount, stopCount, beginTime, countDur;\nbeginCount = 0;\nstopCount = 99;\nbeginTime = 0;\ncountDur = 4;\n$bm_rt = $bm_sum($bm_sum('', Math.round(linear(time, beginTime, $bm_sum(beginTime, countDur), beginCount, stopCount))), '%');",
+                    "k": [
+                        {
+                            "s": {
+                                "s": 10,
+                                "f": "Montserrat-SemiBold",
+                                "t": "0",
+                                "j": 2,
+                                "tr": 0,
+                                "lh": 12,
+                                "ls": 0,
+                                "fc": [0.945, 0.388, 0.314]
+                            },
+                            "t": 0
+                        }
+                    ]
+                },
+                "p": {},
+                "m": { "g": 1, "a": { "a": 0, "k": [0, 0], "ix": 2 } },
+                "a": []
+            },
+            "ip": 0,
+            "op": 101,
+            "st": 0,
+            "bm": 0
+        },
+        {
+            "ddd": 0,
+            "ind": 2,
+            "ty": 4,
+            "nm": "Complete contornos",
+            "sr": 1,
+            "ks": {
+                "o": { "a": 0, "k": 100, "ix": 11 },
+                "r": { "a": 0, "k": 0, "ix": 10 },
+                "p": { "a": 0, "k": [24.125, 24, 0], "ix": 2 },
+                "a": { "a": 0, "k": [16, 16, 0], "ix": 1 },
+                "s": { "a": 0, "k": [125.781, 125.781, 100], "ix": 6 }
+            },
+            "ao": 0,
+            "shapes": [
+                {
+                    "ty": "gr",
+                    "it": [
+                        {
+                            "ind": 0,
+                            "ty": "sh",
+                            "ix": 1,
+                            "ks": {
+                                "a": 0,
+                                "k": {
+                                    "i": [
+                                        [0, 0],
+                                        [0, 0],
+                                        [0, 0]
+                                    ],
+                                    "o": [
+                                        [0, 0],
+                                        [0, 0],
+                                        [0, 0]
+                                    ],
+                                    "v": [
+                                        [5.25, -4.25],
+                                        [-2.827, 4.25],
+                                        [-5.25, 1.703]
+                                    ],
+                                    "c": false
+                                },
+                                "ix": 2
+                            },
+                            "nm": "Caminho 1",
+                            "mn": "ADBE Vector Shape - Group",
+                            "hd": false
+                        },
+                        {
+                            "ty": "st",
+                            "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
+                            "o": { "a": 0, "k": 100, "ix": 4 },
+                            "w": { "a": 0, "k": 3, "ix": 5 },
+                            "lc": 2,
+                            "lj": 2,
+                            "bm": 0,
+                            "nm": "Traçado 1",
+                            "mn": "ADBE Vector Graphic - Stroke",
+                            "hd": false
+                        },
+                        {
+                            "ty": "tr",
+                            "p": { "a": 0, "k": [15.917, 16.25], "ix": 2 },
+                            "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                            "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                            "r": { "a": 0, "k": 0, "ix": 6 },
+                            "o": { "a": 0, "k": 100, "ix": 7 },
+                            "sk": { "a": 0, "k": 0, "ix": 4 },
+                            "sa": { "a": 0, "k": 0, "ix": 5 },
+                            "nm": "Transformar"
+                        }
+                    ],
+                    "nm": "Grupo 1",
+                    "np": 2,
+                    "cix": 2,
+                    "bm": 0,
+                    "ix": 1,
+                    "mn": "ADBE Vector Group",
+                    "hd": false
+                },
+                {
+                    "ty": "gr",
+                    "it": [
+                        {
+                            "ind": 0,
+                            "ty": "sh",
+                            "ix": 1,
+                            "ks": {
+                                "a": 0,
+                                "k": {
+                                    "i": [
+                                        [-7.459, 0.197],
+                                        [-2.168, -7.283],
+                                        [5.904, -3.789],
+                                        [5.139, 3.557],
+                                        [-1.676, 5.795]
+                                    ],
+                                    "o": [
+                                        [7.969, -0.211],
+                                        [1.938, 6.51],
+                                        [-5.268, 3.381],
+                                        [-5.116, -3.539],
+                                        [1.976, -6.832]
+                                    ],
+                                    "v": [
+                                        [-1.303, -15.995],
+                                        [15.508, -3.068],
+                                        [7.522, 13.652],
+                                        [-9.725, 13.124],
+                                        [-15.458, -2.247]
+                                    ],
+                                    "c": true
+                                },
+                                "ix": 2
+                            },
+                            "nm": "Caminho 1",
+                            "mn": "ADBE Vector Shape - Group",
+                            "hd": false
+                        },
+                        {
+                            "ty": "fl",
+                            "c": { "a": 0, "k": [0.322000002394, 0.8, 0.528999956916, 1], "ix": 4 },
+                            "o": { "a": 0, "k": 100, "ix": 5 },
+                            "r": 1,
+                            "bm": 0,
+                            "nm": "Preenchimento 1",
+                            "mn": "ADBE Vector Graphic - Fill",
+                            "hd": false
+                        },
+                        {
+                            "ty": "tr",
+                            "p": { "a": 0, "k": [16, 16], "ix": 2 },
+                            "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                            "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                            "r": { "a": 0, "k": 0, "ix": 6 },
+                            "o": { "a": 0, "k": 100, "ix": 7 },
+                            "sk": { "a": 0, "k": 0, "ix": 4 },
+                            "sa": { "a": 0, "k": 0, "ix": 5 },
+                            "nm": "Transformar"
+                        }
+                    ],
+                    "nm": "Grupo 2",
+                    "np": 4,
+                    "cix": 2,
+                    "bm": 0,
+                    "ix": 2,
+                    "mn": "ADBE Vector Group",
+                    "hd": false
+                }
+            ],
+            "ip": 101,
+            "op": 102,
+            "st": 2,
+            "bm": 0
+        },
+        {
+            "ddd": 0,
+            "ind": 3,
+            "ty": 4,
+            "nm": "Vector contornos",
+            "sr": 1,
+            "ks": {
+                "o": { "a": 0, "k": 100, "ix": 11 },
+                "r": { "a": 0, "k": -90, "ix": 10 },
+                "p": { "a": 0, "k": [24, 24, 0], "ix": 2 },
+                "a": { "a": 0, "k": [21, 20, 0], "ix": 1 },
+                "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+            },
+            "ao": 0,
+            "shapes": [
+                {
+                    "ty": "gr",
+                    "it": [
+                        {
+                            "ind": 0,
+                            "ty": "sh",
+                            "ix": 1,
+                            "ks": {
+                                "a": 0,
+                                "k": {
+                                    "i": [
+                                        [2.3, 7.725],
+                                        [9.026, -0.239],
+                                        [2.047, -7.077],
+                                        [-5.777, -3.997],
+                                        [-5.999, 3.849]
+                                    ],
+                                    "o": [
+                                        [-2.38, -7.994],
+                                        [-8.819, 0.233],
+                                        [-1.93, 6.673],
+                                        [5.752, 3.981],
+                                        [6.28, -4.031]
+                                    ],
+                                    "v": [
+                                        [17.217, -4.113],
+                                        [-1.563, -18.469],
+                                        [-17.587, -3.279],
+                                        [-11.071, 14.294],
+                                        [8.395, 14.859]
+                                    ],
+                                    "c": true
+                                },
+                                "ix": 2
+                            },
+                            "nm": "Caminho 1",
+                            "mn": "ADBE Vector Shape - Group",
+                            "hd": false
+                        },
+                        {
+                            "ty": "st",
+                            "c": {
+                                "a": 0,
+                                "k": [0.944999964097, 0.388000009574, 0.313999998803, 1],
+                                "ix": 3
+                            },
+                            "o": { "a": 0, "k": 100, "ix": 4 },
+                            "w": { "a": 0, "k": 4, "ix": 5 },
+                            "lc": 2,
+                            "lj": 2,
+                            "bm": 0,
+                            "nm": "Traçado 1",
+                            "mn": "ADBE Vector Graphic - Stroke",
+                            "hd": false
+                        },
+                        {
+                            "ty": "tr",
+                            "p": { "a": 0, "k": [21.208, 20.475], "ix": 2 },
+                            "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                            "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                            "r": { "a": 0, "k": 0, "ix": 6 },
+                            "o": { "a": 0, "k": 100, "ix": 7 },
+                            "sk": { "a": 0, "k": 0, "ix": 4 },
+                            "sa": { "a": 0, "k": 0, "ix": 5 },
+                            "nm": "Transformar"
+                        }
+                    ],
+                    "nm": "Grupo 1",
+                    "np": 2,
+                    "cix": 2,
+                    "bm": 0,
+                    "ix": 1,
+                    "mn": "ADBE Vector Group",
+                    "hd": false
+                },
+                {
+                    "ty": "tm",
+                    "s": { "a": 0, "k": 0, "ix": 1 },
+                    "e": {
+                        "a": 1,
+                        "k": [
+                            {
+                                "i": { "x": [0.833], "y": [0.833] },
+                                "o": { "x": [0.167], "y": [0.167] },
+                                "t": 0,
+                                "s": [0]
+                            },
+                            { "t": 100, "s": [100] }
+                        ],
+                        "ix": 2
+                    },
+                    "o": { "a": 0, "k": 0, "ix": 3 },
+                    "m": 1,
+                    "ix": 2,
+                    "nm": "Aparar caminhos 1",
+                    "mn": "ADBE Vector Filter - Trim",
+                    "hd": false
+                }
+            ],
+            "ip": 0,
+            "op": 101,
+            "st": 0,
+            "bm": 0
+        }
+    ],
+    "markers": []
+}

package/src/libs/ParalaxItem/_dS.jsx

@@ -0,0 +1,253 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { Flex } from "../Flex";
+import { Space } from "../Space";
+import { Typo } from "../Typo";
+import { ParalaxItem } from ".";
+
+const DemoCard = ({ label, speed, bg }) => (
+    <ParalaxItem.speed speed={speed}>
+        <Flex
+            direction="column"
+            gap={8}
+            padding={20}
+            minHeight={140}
+            minWidth={140}
+            xAlign="center"
+            yAlign="center"
+            bgColor={bg}
+        >
+            <Typo.h4>{label}</Typo.h4>
+            <Typo.span>{`speed ${speed}`}</Typo.span>
+        </Flex>
+    </ParalaxItem.speed>
+);
+
+const coverDemoSrc =
+    "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=85";
+
+const CoverImageDemo = () => (
+    <Flex.column gap={0} full>
+        <Space size={180} />
+        <ParalaxItem.coverImage src={coverDemoSrc} alt="Paralaks kapak örneği" />
+        <Space size={180} />
+    </Flex.column>
+);
+
+const ParalaxDemo = () => (
+    <Flex.column gap={0} full style={{ position: "relative" }}>
+        <Space size={280} />
+        <Flex
+            gap={24}
+            xAlign="center"
+            yAlign="center"
+            full
+            style={{
+                position: "relative",
+            }}
+        >
+            <Flex
+                aria-hidden="true"
+                style={{
+                    position: "fixed",
+                    left: 0,
+                    right: 0,
+                    top: "50%",
+                    height: 1,
+                    background: "currentColor",
+                    opacity: 0.35,
+                    pointerEvents: "none",
+                    zIndex: 2,
+                }}
+            />
+            <DemoCard label="1" speed={-50} bg="greys.shade20" />
+            <DemoCard label="2" speed={0} bg="greys.shade30" />
+            <DemoCard label="3" speed={50} bg="greys.shade20" />
+        </Flex>
+        <Space size={480} />
+        <Typo.p style={{ textAlign: "center", opacity: 0.7 }}>
+            Origin çizgisi viewport Y ortasıdır. Scroll ederken itemların hız farkını izleyin.
+        </Typo.p>
+        <Space size={280} />
+    </Flex.column>
+);
+
+const X = () => (
+    <Ds.page
+        title="<ParalaxItem>"
+        releasedOn="1.0.0"
+        description={{
+            tr: "Her paralaks davranışı kendi varyantında tanımlanır. Mevcut hız temelli davranış ParalaxItem.speed, kapak görseli davranışı ise ParalaxItem.coverImage olarak kullanılır.",
+            en: "Each parallax behavior is defined in its own variant. The existing speed-based behavior is used through ParalaxItem.speed, while the cover-image behavior is used through ParalaxItem.coverImage.",
+        }}
+    >
+        <Ds.block
+            title={{ tr: "speed", en: "speed" }}
+            description={{
+                tr: "Aynı satırdaki üç item farklı speed değerleriyle origin’e yaklaşıp uzaklaşır. Ortadaki sabit çizgi origin’i gösterir.",
+                en: "Three items in a row approach and leave the origin at different speeds. The fixed center line marks the origin.",
+            }}
+            code={`import { ParalaxItem } from "${SYS.basePath}";
+
+<ParalaxItem.speed speed={-50}>
+    <SlowItem />
+</ParalaxItem.speed>
+
+<ParalaxItem.speed speed={0}>
+    <NormalItem />
+</ParalaxItem.speed>
+
+<ParalaxItem.speed speed={50}>
+    <FastItem />
+</ParalaxItem.speed>`}
+            example={<ParalaxDemo />}
+        />
+        <Ds.api
+            disableLastBlock
+            args="<ParalaxItem.speed speed />"
+            props={{
+                speed: {
+                    description: {
+                        tr: "Paralaks katsayısı. 0 efektsiz (children doğrudan). Negatif: origin’e daha yakın. Pozitif: origin’den daha uzak. Tipik aralık ±50 civarı.",
+                        en: "Parallax factor. 0 disables the effect (children returned directly). Negative: closer to origin. Positive: further from origin. Typical range around ±50.",
+                    },
+                    type: "number",
+                    defaultValue: "0",
+                },
+                children: {
+                    description: {
+                        tr: "Paralaks uygulanacak içerik.",
+                        en: "Content that receives the parallax transform.",
+                    },
+                    type: "ReactNode",
+                    required: true,
+                },
+                className: {
+                    description: {
+                        tr: "Wrapper’a iletilen className. speed 0 iken wrapper yok.",
+                        en: "className passed to the wrapper. No wrapper when speed is 0.",
+                    },
+                    type: "string",
+                },
+                style: {
+                    description: {
+                        tr: "Wrapper’a iletilen style. speed 0 iken wrapper yok.",
+                        en: "style passed to the wrapper. No wrapper when speed is 0.",
+                    },
+                    type: "CSSProperties",
+                },
+            }}
+        />
+        <Ds.block
+            title={{ tr: "coverImage", en: "coverImage" }}
+            description={{
+                tr: "Alan sayfayla normal hızda akar. Varyant, görselin çerçeve dışındaki gerçek piksel alanını ölçer ve girişte ilk, çıkışta son görünür piksele ulaşır. horizontal panoramik görseli soldan sağa kaydırır.",
+                en: "The frame scrolls at the normal page speed. The variant measures the image's real pixel overflow and reaches the first visible pixel on entry and the last one on exit. horizontal pans a panoramic image from left to right.",
+            }}
+            code={`import { ParalaxItem } from "${SYS.basePath}";
+
+<ParalaxItem.coverImage
+    catalogSet="city-gate"
+    alt="Şehir kapısı"
+    w="100%"
+    h="50vh"
+/>`}
+            example={<CoverImageDemo />}
+        />
+        <Ds.block
+            title={{ tr: "Yatay panorama", en: "Horizontal panorama" }}
+            description={{
+                tr: "horizontal true olduğunda, görsel çerçeveye yüksekliğinden oturur ve scroll ile soldan sağa pan yapılır.",
+                en: "When horizontal is true, the image is fitted by height and scroll pans it from left to right.",
+            }}
+            code={`<ParalaxItem.coverImage
+    src="/images/panorama.jpg"
+    alt="Panoramik şehir görünümü"
+    horizontal
+    h="50vh"
+/>`}
+        />
+        <Ds.api
+            args="<ParalaxItem.coverImage src externalSet catalogSet />"
+            props={{
+                src: {
+                    description: {
+                        tr: "Tek görsel URL'i. Image ile aynı kaynak API'sini kullanır.",
+                        en: "Single image URL. Uses the same source API as Image.",
+                    },
+                    type: "string",
+                },
+                externalSet: {
+                    description: {
+                        tr: "Katalog dışından gelen image set.",
+                        en: "Image set supplied outside the catalog.",
+                    },
+                    type: "object | array",
+                },
+                catalogSet: {
+                    description: {
+                        tr: "createImageCatalog ile kaydedilmiş set adı.",
+                        en: "Name of a set registered with createImageCatalog.",
+                    },
+                    type: "string",
+                },
+                w: {
+                    description: {
+                        tr: "Dış kapak alanının genişliği. width ile eşdeğerdir.",
+                        en: "Width of the outer cover frame. Alias for width.",
+                    },
+                    type: "string | number",
+                    defaultValue: '"100%"',
+                },
+                h: {
+                    description: {
+                        tr: "Dış kapak alanının yüksekliği. height ile eşdeğerdir.",
+                        en: "Height of the outer cover frame. Alias for height.",
+                    },
+                    type: "string | number",
+                    defaultValue: '"50vh"',
+                },
+                width: {
+                    description: {
+                        tr: "w için alternatif genişlik prop'u.",
+                        en: "Alternative width prop for w.",
+                    },
+                    type: "string | number",
+                },
+                height: {
+                    description: {
+                        tr: "h için alternatif yükseklik prop'u.",
+                        en: "Alternative height prop for h.",
+                    },
+                    type: "string | number",
+                },
+                horizontal: {
+                    description: {
+                        tr: "true olduğunda panoramik görseli soldan sağa kaydırır. false olduğunda görsel üstten alta kayar.",
+                        en: "When true, pans a panoramic image from left to right. When false, the image moves from top to bottom.",
+                    },
+                    type: "boolean",
+                    defaultValue: "false",
+                },
+                threshold: {
+                    description: {
+                        tr: "Hareket başlamadan ve bitmeden önce viewport uçlarında bırakılan yüzde tampon alanı. 20 olduğunda girişte ilk %20 sabit kalır, çıkıştaki son %20'ye gelindiğinde hareket tamamlanır.",
+                        en: "Percentage buffer kept at both viewport edges before motion starts and after it ends. At 20, the first 20% of entry is still and motion is complete by the final 20% of exit.",
+                    },
+                    type: "number",
+                    defaultValue: "25",
+                },
+                alt: {
+                    description: {
+                        tr: "Görselin alternatif metni.",
+                        en: "Alternative text for the image.",
+                    },
+                    type: "string",
+                    defaultValue: '""',
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/ParalaxItem/_styled.js

@@ -0,0 +1,79 @@
+import styled, { css } from "styled-components";
+
+const S = {
+    container: styled.div`
+        min-width: 0;
+        transform: translate3d(0, var(--paralax-y, 0px), 0);
+        will-change: transform;
+
+        @media (prefers-reduced-motion: reduce) {
+            transform: none;
+            will-change: auto;
+        }
+    `,
+    coverContainer: styled.div`
+        position: relative;
+        max-width: 100%;
+        overflow: hidden;
+
+        > span {
+            display: block;
+            max-width: none;
+        }
+
+        img {
+            display: block;
+            min-height: 100%;
+            transform: translate3d(var(--paralax-cover-x, 0px), var(--paralax-cover-y, 0px), 0);
+            will-change: transform;
+        }
+
+        &[data-paralax-axis="y"] {
+            > span,
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+
+        &[data-paralax-axis="x"] {
+            > span {
+                width: auto;
+                height: 100%;
+            }
+
+            img {
+                width: auto;
+                height: 100%;
+                min-width: 100%;
+            }
+        }
+
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    &[data-paralax-axis="y"] {
+                        > span {
+                            width: 100%;
+                            height: 125%;
+                        }
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                        }
+                    }
+                `,
+            )};
+
+        @media (prefers-reduced-motion: reduce) {
+            img {
+                transform: none;
+                will-change: auto;
+            }
+        }
+    `,
+};
+
+export default S;