@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/Group/_dS.jsx

@@ -0,0 +1,154 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { Group } from ".";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+
+const items = [
+    {
+        bgColor: "error",
+        label: "Lead",
+        prefix: { icon: "bullet" },
+        onClick: () => console.log("lead"),
+    },
+    { label: "Item 2", onClick: () => console.log("2") },
+    { label: "Item 3", onClick: () => console.log("3") },
+    { label: "Item 4", onClick: () => console.log("4") },
+];
+
+const groupProps = {
+    bgColor: "success",
+    prefix: { icon: "user" },
+    size: 100,
+};
+
+const X = () => (
+    <Ds.page
+        title="<Group>"
+        releasedOn="1.0.0"
+        description={
+            <>
+                If you need to use the same component multiple times and your items share common
+                properties, the 'Group' component can be useful. Group allows you to specify shared
+                item properties via the 'items' and 'groupProps' parameters. By default, it renders
+                with a 'Flex' wrapper. If you set 'flat', Flex is removed and it returns only the
+                mapped components in a fragment.
+                <br />
+                <br />
+                For more advanced usage, see 'ButtonGroup'.
+            </>
+        }
+    >
+        <Ds.block
+            title={{ tr: "Flex sarmalayıcısı ile", en: "With Flex Wrapper" }}
+            code={`import { Group, Button } from "${SYS.basePath}";
+
+                   const items = [
+                    { bgColor: "error", label: "Lead", onClick: () => {} },
+                    { label: "Item 2", onClick: () => {} },
+                   ];
+
+                   <Group
+                    component={Button}
+                    items={items}
+                    groupProps={{ bgColor: "success", prefix: { icon: "user" } }}
+                    flexProps={{ gap: 5, wrap: true }}
+                   />`}
+            example={
+                <Group
+                    component={Button}
+                    items={items}
+                    groupProps={groupProps}
+                    flexProps={{ gap: 5, wrap: true }}
+                />
+            }
+        />
+        <Ds.block
+            title={{ tr: "flat — yerleşim parent'a aittir", en: "flat — Parent Owns Layout" }}
+            description={{ tr: "flat true olduğunda Group, yalnızca eşlenmiş componentleri bir fragment içinde döndürür. Flex veya ScrollFlex ile kendiniz sarmalayın.", en: "When flat is true, Group returns only the mapped components in a fragment. Wrap with Flex or ScrollFlex yourself." }}
+            code={`import { Group, Button, Flex } from "${SYS.basePath}";
+
+                    <Flex gap={8}>
+                        <Group
+                            flat
+                            component={Button.plain}
+                            items={[
+                                { label: "One", onClick: () => {} },
+                                { label: "Two", onClick: () => {} },
+                            ]}
+                            groupProps={{ variant: "plain" }}
+                        />
+                    </Flex>`}
+            example={
+                <Flex gap={8}>
+                    <Group
+                        flat
+                        component={Button.plain}
+                        items={[
+                            { label: "One", onClick: () => {} },
+                            { label: "Two", onClick: () => {} },
+                            { label: "Three", onClick: () => {} },
+                        ]}
+                        groupProps={{ variant: "plain" }}
+                    />
+                </Flex>
+            }
+        />
+        <Ds.block
+            title={{ tr: "Kolon yerleşimi", en: "Column Layout" }}
+            code={`import { Group, Button } from "${SYS.basePath}";
+
+                   <Group
+                    component={Button}
+                    items={items}
+                    groupProps={groupProps}
+                    flexProps={{ direction: "column", gap: 5 }}
+                   />`}
+            example={
+                <Group
+                    component={Button}
+                    items={items.slice(0, 4)}
+                    groupProps={groupProps}
+                    flexProps={{ direction: "column", gap: 5 }}
+                />
+            }
+        />
+        <Ds.api
+            args="<Group component={Component} items={[]} />"
+            props={{
+                component: {
+                    description:
+                        "Component constructor to render for each item (e.g. Button, Button.plain).",
+                    type: "component",
+                    required: true,
+                },
+                items: {
+                    description:
+                        "Array of prop objects; each entry is merged with groupProps and passed to component.",
+                    type: "array",
+                    required: true,
+                },
+                groupProps: {
+                    description:
+                        "Deep-merged into every item; per-item keys override these defaults.",
+                    type: "object",
+                    defaultValue: "{}",
+                },
+                flexProps: {
+                    description: { tr: "İç Flex sarmalayıcısına aktarılır. flat true olduğunda yok sayılır.", en: "Forwarded to the inner Flex wrapper. Ignored when flat is true." },
+                    type: "object",
+                    defaultValue: "{}",
+                },
+                flat: {
+                    description:
+                        "When true, renders only mapped components in a fragment — no Flex wrapper.",
+                    type: "boolean",
+                    defaultValue: "false",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/Group/index.jsx

@@ -0,0 +1,35 @@
+import { createElement, useMemo } from "react";
+import { Flex } from "../Flex";
+import { deepMerge } from "../deepMerge";
+
+export const Group = ({
+    component: Component,
+    items = [],
+    groupProps = {},
+    flexProps = {},
+    flat = false,
+}) => {
+    const preparedItems = useMemo(
+        () => items.map((item) => deepMerge(groupProps, item)),
+        [groupProps, items],
+    );
+
+    if (!Component) return null;
+
+    const nodes = preparedItems.map((item, index) => {
+        const { key, ...itemProps } = item || {};
+
+        return createElement(Component, {
+            key: key ?? index,
+            ...itemProps,
+        });
+    });
+
+    if (flat) return nodes;
+
+    return (
+        <Flex {...flexProps}>
+            {nodes}
+        </Flex>
+    );
+};

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

@@ -0,0 +1,185 @@
+import styled from "styled-components";
+
+const resolveThemeColor = (theme, color) => theme[color] || color || theme.foreground;
+const resolveInverseSliderColor = (theme, color) =>
+    color === "background" ? theme.foreground : theme.background;
+
+const S = {
+    container: styled.header`
+        position: relative;
+        isolation: isolate;
+        width: 100%;
+        height: calc(100vh + 130rem);
+        min-height: 690rem;
+        color: ${({ theme }) => theme.foreground};
+    `,
+    coverStage: styled.div`
+        position: absolute;
+        inset: 0 0 auto;
+        width: 100%;
+        height: 100vh;
+        min-height: 560rem;
+    `,
+    coverLayer: styled.div`
+        position: fixed;
+        inset: 0;
+        z-index: 0;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        background: ${({ theme }) => theme.background};
+        opacity: ${({ $pastThreshold }) => ($pastThreshold ? 0.11 : 1)};
+        transition: opacity 420ms ease;
+        pointer-events: none;
+
+        & > div,
+        & img {
+            width: 100%;
+            height: 100%;
+        }
+
+        & img {
+            object-fit: cover;
+        }
+    `,
+    title: styled.h1`
+        position: absolute;
+        z-index: 1;
+        isolation: isolate;
+        left: 150rem;
+        bottom: 205rem;
+        width: fit-content;
+        max-width: calc(100vw - 180rem);
+        box-sizing: border-box;
+        padding: 36rem 186rem 50rem 36rem;
+        margin: 0;
+        color: ${({ theme, $sliderColor, $pastThreshold }) =>
+            $pastThreshold ? theme.foreground : resolveThemeColor(theme, $sliderColor)};
+        font: inherit;
+        letter-spacing: -0.035em;
+        line-height: 0.7;
+        transition: color 420ms ease;
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+            background: ${({ theme, $sliderColor }) =>
+                theme.colorAlpha(resolveInverseSliderColor(theme, $sliderColor), 0.6)};
+            opacity: ${({ $pastThreshold }) => ($pastThreshold ? 0 : 1)};
+            backdrop-filter: blur(2rem);
+            -webkit-backdrop-filter: blur(2rem);
+            transition: opacity 420ms ease;
+            pointer-events: none;
+        }
+
+        @media (max-width: 700px) {
+            left: 24rem;
+            max-width: calc(100vw - 48rem);
+            padding-right: 174rem;
+            padding-left: 24rem;
+        }
+    `,
+    titleFirstLine: styled.span`
+        display: block;
+        font-size: clamp(21.375rem, 2.53125vw, 40.5rem);
+        font-weight: 700;
+    `,
+    titleSecondLine: styled.span`
+        display: block;
+        margin-left: clamp(18rem, 3vw, 58rem);
+        font-size: clamp(32.625rem, 3.9375vw, 63rem);
+        font-weight: 300;
+    `,
+    contentArea: styled.div`
+        position: absolute;
+        z-index: 2;
+        top: calc(100vh - 205rem);
+        left: 0;
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+
+        @media (max-width: 700px) {
+            padding: 0 24rem;
+            box-sizing: border-box;
+        }
+    `,
+    area1: styled.div`
+        position: relative;
+        z-index: 0;
+        flex: 0 0 160rem;
+        height: 90rem;
+        margin-top: 15rem;
+        margin-right: -10rem;
+        background: ${({ theme }) => theme.colorAlpha(theme.background, 10)};
+        backdrop-filter: blur(3rem);
+        -webkit-backdrop-filter: blur(3rem);
+
+        @media (max-width: 700px) {
+            display: none;
+        }
+    `,
+    info: styled.div`
+        position: relative;
+        z-index: 1;
+        flex: 0 0 50%;
+        min-width: 0;
+        min-height: 220rem;
+        padding: 24rem 36rem 32rem;
+        background: ${({ theme }) => theme.colorAlpha(theme.background, 0.7)};
+        backdrop-filter: blur(2rem);
+        -webkit-backdrop-filter: blur(2rem);
+
+        @media (max-width: 700px) {
+            flex: 1 1 auto;
+            padding: 22rem 24rem 28rem;
+        }
+    `,
+    meta: styled.div`
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 13rem 50rem;
+        min-height: 23rem;
+        font-size: 14.3rem;
+        font-weight: 500;
+    `,
+    metaItem: styled.span`
+        display: inline-flex;
+        align-items: center;
+        gap: 9rem;
+        line-height: 1;
+        white-space: nowrap;
+    `,
+    divider: styled.div`
+        width: 78rem;
+        height: 2px;
+        margin: 18rem 0 20rem;
+        background: ${({ theme }) => theme.primary};
+    `,
+    quote: styled.blockquote`
+        max-width: 650rem;
+        margin: 0;
+        font-size: clamp(15.3rem, 1.395vw, 21.6rem);
+        font-weight: 300;
+        line-height: 1.63;
+        letter-spacing: -0.012em;
+        text-wrap: balance;
+    `,
+    area3: styled.div`
+        flex: 1 1 auto;
+        height: 40rem;
+        margin-top: 50rem;
+        background: ${({ theme }) => theme.colorAlpha(theme.background, 10)};
+        backdrop-filter: blur(3rem);
+        -webkit-backdrop-filter: blur(3rem);
+
+        @media (max-width: 700px) {
+            display: none;
+        }
+    `,
+};
+
+export default S;

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

@@ -0,0 +1,82 @@
+import { isValidElement } from "react";
+import { Icon } from "../../Icon";
+import { Image } from "../../Image";
+import NestedBaseUi from "helpers/NestedBaseUi";
+import S from "./_styled";
+import { useVars } from "./useVars";
+
+const Amedist = (props = {}) => {
+    const {
+        rootRef,
+        pastThreshold,
+        titleLines,
+        parentTitle,
+        parentIcon,
+        location,
+        coverImage,
+        quote,
+        sliderColor,
+    } = useVars(props);
+
+    const hasMeta = Boolean(parentTitle || location);
+    const hasQuote = quote != null && quote !== false && quote !== "";
+
+    return (
+        <S.container ref={rootRef}>
+            <S.coverStage>
+                <S.coverLayer $pastThreshold={pastThreshold} aria-hidden="true">
+                    {coverImage && (
+                        <Image
+                            catalogSet={coverImage}
+                            alt=""
+                            w="100%"
+                            h="100%"
+                            objectFit="cover"
+                            fetchPriority="high"
+                        />
+                    )}
+                </S.coverLayer>
+
+                {titleLines[0] && (
+                    <S.title $sliderColor={sliderColor} $pastThreshold={pastThreshold}>
+                        <S.titleFirstLine>{titleLines[0]}</S.titleFirstLine>
+                        {titleLines[1] && <S.titleSecondLine>{titleLines[1]}</S.titleSecondLine>}
+                    </S.title>
+                )}
+            </S.coverStage>
+
+            <S.contentArea>
+                <S.area1 aria-hidden="true" />
+                <S.info>
+                    {hasMeta && (
+                        <S.meta>
+                            {parentTitle && (
+                                <S.metaItem>
+                                    {parentIcon && <Icon icon={parentIcon} width={16} flat />}
+                                    {parentTitle}
+                                </S.metaItem>
+                            )}
+                            {location && (
+                                <S.metaItem>
+                                    <Icon icon="location" width={16} flat />
+                                    {location}
+                                </S.metaItem>
+                            )}
+                        </S.meta>
+                    )}
+                    <S.divider aria-hidden="true" />
+                    {hasQuote && (
+                        <S.quote>
+                            {/* Rich quote JSX (e.g. text + <i>) arrives as a Fragment with multiple
+                                children — NestedBaseUi keys that list so React doesn't warn. */}
+                            {isValidElement(quote) ? <NestedBaseUi content={quote} /> : quote}
+                        </S.quote>
+                    )}
+                </S.info>
+                <S.area3 aria-hidden="true" />
+            </S.contentArea>
+        </S.container>
+    );
+};
+
+export default Amedist;

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

@@ -0,0 +1,81 @@
+import { useEffect, useMemo, useRef, useState, isValidElement } from "react";
+import { t } from "../../getText";
+
+const EARLY_SCROLL_THRESHOLD_RATIO = 1 / 12;
+
+const localize = (value) => {
+    if (value == null || value === "") return value;
+    if (typeof value === "string") return value;
+    // Already-resolved JSX (Fragment / element) — don't run through getText object paths.
+    if (isValidElement(value)) return value;
+    return t(value);
+};
+
+const splitTitle = (title) => {
+    const words = String(title || "")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+
+    if (words.length < 2) return [words[0] || "", ""];
+
+    const splitAt = Math.ceil(words.length / 2);
+    return [words.slice(0, splitAt).join(" "), words.slice(splitAt).join(" ")];
+};
+
+export const useVars = ({
+    title,
+    parentTitle,
+    parentIcon,
+    location,
+    coverImage,
+    quote,
+    sliderColor = "foreground",
+}) => {
+    const rootRef = useRef(null);
+    const [pastThreshold, setPastThreshold] = useState(false);
+
+    const localizedTitle = localize(title);
+    const titleLines = useMemo(() => splitTitle(localizedTitle), [localizedTitle]);
+
+    useEffect(() => {
+        let frame;
+
+        const update = () => {
+            frame = undefined;
+            const rootTop = rootRef.current
+                ? window.scrollY + rootRef.current.getBoundingClientRect().top
+                : 0;
+            setPastThreshold(
+                window.scrollY - rootTop >= window.innerHeight * EARLY_SCROLL_THRESHOLD_RATIO,
+            );
+        };
+
+        const scheduleUpdate = () => {
+            if (frame) return;
+            frame = window.requestAnimationFrame(update);
+        };
+
+        update();
+        window.addEventListener("scroll", scheduleUpdate, { passive: true });
+        window.addEventListener("resize", scheduleUpdate);
+
+        return () => {
+            window.removeEventListener("scroll", scheduleUpdate);
+            window.removeEventListener("resize", scheduleUpdate);
+            if (frame) window.cancelAnimationFrame(frame);
+        };
+    }, []);
+
+    return {
+        rootRef,
+        pastThreshold,
+        titleLines,
+        parentTitle: localize(parentTitle),
+        parentIcon,
+        location: t(location),
+        coverImage,
+        quote: quote == null ? null : localize(quote),
+        sliderColor: sliderColor || "foreground",
+    };
+};

package/src/libs/HeaderCover/index.js

@@ -0,0 +1,11 @@
+import Amedist from "./Amedist";
+
+const defaultVariantKey = "amedist";
+const variants = { amedist: Amedist };
+
+export const HeaderCover = variants[defaultVariantKey];
+Object.assign(HeaderCover, variants);
+HeaderCover.displayName = "HeaderCover";
+Object.entries(variants).forEach(([key, Component]) => {
+    if (Component) Component.displayName = `HeaderCover.${key}`;
+});