@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/Layout/footerAmedist/_styled.js

@@ -0,0 +1,75 @@
+import styled, { css } from "styled-components";
+
+export const S = {
+    container: styled.footer`
+        width: 100%;
+        min-height: ${({ $minHeight }) => $minHeight};
+        box-sizing: border-box;
+        padding: 50rem;
+
+        display: flex;
+        gap: 20rem;
+
+        border-top: 1px solid ${({ theme }) => theme.colorAlpha(theme.foreground, 0.5)};
+
+        background: ${({ theme }) => theme.background};
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    flex-direction: column;
+                    min-height: 100vh;
+                    padding: 40rem 25px;
+                    gap: 35rem;
+                `,
+            )};
+    `,
+    logoArea: styled.div`
+        flex: 0 0 250rem;
+        min-width: 0;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    flex: 0 0 auto;
+                    width: 100%;
+                    margin-top: 0;
+                    padding-bottom: 0;
+                    align-self: stretch;
+                `,
+            )};
+    `,
+    linksArea: styled.div`
+        flex: 1 1 0;
+        min-width: 0;
+        margin-top: 100rem;
+        padding-bottom: 75rem;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    flex: 0 0 auto;
+                    width: 100%;
+                    margin-top: 0;
+                    padding-bottom: 0;
+                    align-self: stretch;
+                `,
+            )};
+    `,
+    creditArea: styled.div`
+        flex: 1 1 0;
+        min-width: 0;
+        align-self: flex-end;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    flex: 0 0 auto;
+                    width: 100%;
+                    margin-top: auto;
+                    padding-bottom: 0;
+                    align-self: stretch;
+                `,
+            )};
+    `,
+};

package/src/libs/Layout/footerAmedist/index.jsx

@@ -0,0 +1,22 @@
+import { cssNormalizeSize } from "../../cssNormalizeSize";
+import { S } from "./_styled";
+
+const FooterAmedist = ({
+    controllerId: _controllerId,
+    minHeight = "100vh",
+    logo,
+    links,
+    credit,
+    ...rest
+}) => (
+    <S.container {...rest} $minHeight={cssNormalizeSize(minHeight)}>
+        <S.logoArea data-slot="logo-area">{logo}</S.logoArea>
+        <S.linksArea data-slot="links-area">{links}</S.linksArea>
+        <S.creditArea data-slot="credit-area">{credit}</S.creditArea>
+    </S.container>
+);
+
+FooterAmedist.displayName = "Layout.footerAmedist";
+FooterAmedist.layoutControllerName = "footerAmedist";
+
+export default FooterAmedist;

package/src/libs/Layout/headerAmedist/_styled.js

@@ -0,0 +1,151 @@
+import styled, { css } from "styled-components";
+
+const getThemeColor = (theme, value, fallback) =>
+    theme.colorGet?.(value || fallback)?.color || theme[value] || value || theme[fallback];
+
+export const S = {
+    container: styled.header`
+        width: 100%;
+        position: sticky;
+        top: 0;
+        height: ${({ $status, $extendedHeight, $condensedHeight }) =>
+            $status === "hidden"
+                ? 0
+                : $status === "condensed"
+                  ? $condensedHeight
+                  : $extendedHeight}rem;
+        margin-bottom: ${({ $status, $extendedHeight }) =>
+            $status === "hidden" ? 0 : -$extendedHeight}rem;
+        box-sizing: border-box;
+        color: ${({ theme, $headerColor }) => getThemeColor(theme, $headerColor, "foreground")};
+        background: ${({ theme, $headerBackgroundColor, $headerBackgroundAlpha }) =>
+            theme.colorAlpha(
+                getThemeColor(theme, $headerBackgroundColor, "background"),
+                $headerBackgroundAlpha,
+            )};
+        backdrop-filter: blur(5rem);
+        -webkit-backdrop-filter: blur(5rem);
+        font-family: "Montserrat", sans-serif;
+        border: ${({ $status }) => ($status === "hidden" ? 0 : 1)}px solid
+            color-mix(in srgb, currentColor 50%, transparent);
+        border-left: none;
+        border-right: none;
+        z-index: 4;
+        overflow: hidden;
+        pointer-events: ${({ $status }) => ($status === "hidden" ? "none" : "auto")};
+        transition:
+            height 0.25s ease,
+            margin-bottom 0.25s ease,
+            background-color 0.25s ease,
+            border-color 0.25s ease;
+    `,
+    body: styled.div`
+        width: 100%;
+        height: ${({ $status, $extendedHeight, $condensedHeight }) =>
+            $status === "hidden"
+                ? 0
+                : $status === "condensed"
+                  ? $condensedHeight
+                  : $extendedHeight}rem;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        transition: height 0.25s ease;
+
+        & > div:nth-child(1) {
+            flex: 0 0 300px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 10rem 30rem;
+            box-sizing: border-box;
+        }
+
+        & > div:nth-child(2) {
+            flex: 0 0 1px;
+            border-right: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+            height: 100%;
+        }
+
+        & > div:nth-child(3) {
+            flex: 1 1 auto;
+            min-width: 0;
+            padding: 10rem 30rem 10rem 0;
+        }
+
+        & > div:nth-child(4) {
+            flex: 0 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 30rem;
+            padding-right: 30rem;
+        }
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    justify-content: space-between;
+                    & > div:nth-child(1) {
+                        flex: 1 1 auto;
+                        min-width: 0;
+                        justify-content: flex-start;
+                        padding-left: 15rem;
+                        padding-right: 15rem;
+                    }
+                    & > div:nth-child(2),
+                    & > div:nth-child(3) {
+                        display: none;
+                    }
+                    & > div:nth-child(4) > :last-child {
+                        transform: scale(1.25);
+                    }
+                `,
+            )};
+    `,
+    logoButton: styled.button`
+        all: unset;
+        width: ${({ $status }) => ($status === "condensed" ? "160px" : "200px")};
+        height: ${({ $status, $extendedHeight, $condensedHeight }) =>
+            Math.max(($status === "condensed" ? $condensedHeight : $extendedHeight) - 20, 1)}rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    `,
+    logoMask: styled.span`
+        width: 100%;
+        height: 100%;
+        display: block;
+        background-color: currentColor;
+        mask-image: url(${({ $src }) => $src});
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        -webkit-mask-image: url(${({ $src }) => $src});
+        -webkit-mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-size: contain;
+    `,
+    input: styled.input`
+        width: 100%;
+        height: ${({ $height }) => $height}rem;
+        line-height: ${({ $height }) => $height}rem;
+        padding: 0 0 0 30rem;
+        box-sizing: border-box;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        appearance: none;
+
+        &::placeholder {
+            color: currentColor;
+            opacity: 1;
+            font-weight: 500;
+        }
+    `,
+};

package/src/libs/Layout/headerAmedist/index.jsx

@@ -0,0 +1,240 @@
+import { isValidElement, useEffect } from "react";
+import { Button } from "../../Button";
+import { Visibility } from "../../Visibility";
+import { baseStore } from "../../baseStore";
+import { t } from "../../getText";
+import { setLanguage } from "../../@Base/GlobalDataProvider/resolveLanguage";
+import { getPageRrdInfo } from "../../getPageRrdInfo";
+import { useNavigate } from "react-router-dom";
+import { useScrollTopLeft } from "../../useScrollTopLeft";
+import { getLayoutController, useLayout } from "../controllerRegistry";
+import { S } from "./_styled";
+
+const DEFAULT_OPEN_ICON_PROPS = {
+    icon: "menuStylish",
+    hoverIcon: "menuStylishFull",
+    activeIcon: "menuStylishFull",
+    width: 16,
+    flat: true,
+};
+
+const DEFAULT_CLOSE_ICON_PROPS = {
+    icon: "closeThin",
+    hoverIcon: "closeThin",
+    activeIcon: "closeThin",
+    width: 16,
+    flat: true,
+};
+
+const LANGUAGE_LABELS = {
+    en: "English",
+    tr: "Turkish",
+};
+
+const LANGUAGE_FLAGS = {
+    en: "gb",
+    tr: "tr",
+};
+
+const resolveLogo = (logo, language, status) => {
+    if (!logo || typeof logo !== "object" || isValidElement(logo)) return logo;
+    const languageLogo = logo[language];
+    if (languageLogo && typeof languageLogo === "object" && !isValidElement(languageLogo)) {
+        return languageLogo[status] ?? languageLogo.extended ?? languageLogo.default;
+    }
+    return languageLogo ?? logo[status] ?? logo.extended ?? logo.default;
+};
+
+const HeaderAmedist = ({
+    controllerId = "default",
+    logo,
+    extendedHeight = 100,
+    condensedHeight = 50,
+    openIconProps = DEFAULT_OPEN_ICON_PROPS,
+    closeIconProps = DEFAULT_CLOSE_ICON_PROPS,
+    headerColor = "foreground",
+    headerBackgroundColor = "background",
+    headerBackgroundAlpha = 70,
+    hideHeader = false,
+    searchPlaceholder,
+    onLogoClick,
+}) => {
+    const controller = useLayout("headerAmedist", { controllerId });
+    const controllerApi = getLayoutController("headerAmedist", controllerId);
+    const [language, languageList = []] = baseStore.useGlobal((state) => [
+        state.language,
+        state.languageSettings?.languageList,
+    ]);
+    const navigate = useNavigate();
+    const { scrollTop } = useScrollTopLeft({
+        source: typeof window === "undefined" ? undefined : window,
+        delay: 80,
+    });
+
+    const { menuStatus, searchValue, headerStatus, openMenu, closeMenu, setSearchValue } =
+        controller;
+    const { setHeaderStatus, setHeaderHeights, hideHeaderFromProp } = controllerApi;
+    const internalState = controllerApi.getState?.() || {};
+    const visibleStatus =
+        headerStatus === "hidden" ? internalState.visibleHeaderStatus : headerStatus;
+    const menuActive = menuStatus !== "closed";
+    const menuButtonCloses = menuStatus === "open" || menuStatus === "opening";
+    const appearance = internalState.headerAppearance || {};
+    const effectiveColor =
+        menuActive || visibleStatus === "condensed"
+            ? "foreground"
+            : appearance.headerColor || headerColor;
+    const effectiveBackgroundColor = appearance.headerBackgroundColor || headerBackgroundColor;
+    const effectiveBackgroundAlpha =
+        menuActive || visibleStatus === "condensed"
+            ? 70
+            : (appearance.headerBackgroundAlpha ?? headerBackgroundAlpha);
+    const resolvedLogo = resolveLogo(logo, language, visibleStatus);
+    const inputHeight = visibleStatus === "condensed" ? condensedHeight : extendedHeight;
+    const nextLanguage = languageList.length
+        ? languageList[(Math.max(languageList.indexOf(language), 0) + 1) % languageList.length]
+        : null;
+
+    const switchLanguage = () => {
+        if (!nextLanguage) return;
+        // Same relatives map as project useRelative / getPageRrdInfo (home has none distinct → URL stays "/").
+        const { relatives, pathname } = getPageRrdInfo();
+        const targetPath = relatives?.[nextLanguage];
+        const normalizedTarget =
+            targetPath == null || targetPath === ""
+                ? null
+                : targetPath.startsWith("/")
+                  ? targetPath
+                  : `/${targetPath}`;
+        const currentPath = pathname?.startsWith("/") ? pathname : `/${pathname || ""}`;
+        const shouldChangeUrl =
+            normalizedTarget != null &&
+            normalizedTarget !== currentPath &&
+            !(normalizedTarget === "/" && (currentPath === "/" || currentPath === ""));
+
+        setLanguage(nextLanguage, {
+            relatives: relatives || undefined,
+            // Header navigates via useNavigate so store snapshot navigate is not required.
+            navigate: false,
+        });
+
+        if (shouldChangeUrl) {
+            navigate({ pathname: normalizedTarget, search: window.location.search });
+        }
+    };
+
+    useEffect(() => {
+        setHeaderHeights({ extendedHeight, condensedHeight });
+    }, [condensedHeight, extendedHeight, setHeaderHeights]);
+
+    useEffect(() => {
+        hideHeaderFromProp(hideHeader);
+        return () => hideHeaderFromProp(false);
+    }, [hideHeader, hideHeaderFromProp]);
+
+    useEffect(() => {
+        if (menuActive) {
+            setHeaderStatus("extended");
+            return;
+        }
+
+        setHeaderStatus(
+            visibleStatus === "condensed"
+                ? scrollTop >= 25
+                    ? "condensed"
+                    : "extended"
+                : scrollTop > 100
+                  ? "condensed"
+                  : "extended",
+        );
+    }, [menuActive, scrollTop, setHeaderStatus, visibleStatus]);
+
+    const goHome = () => {
+        closeMenu();
+        if (onLogoClick) onLogoClick();
+        else navigate("/");
+    };
+
+    const logoContent = isValidElement(resolvedLogo) ? (
+        resolvedLogo
+    ) : resolvedLogo ? (
+        <S.logoMask $src={resolvedLogo} role="img" aria-label="logo" />
+    ) : null;
+
+    return (
+        <S.container
+            $status={headerStatus}
+            $extendedHeight={extendedHeight}
+            $condensedHeight={condensedHeight}
+            $headerColor={effectiveColor}
+            $headerBackgroundColor={effectiveBackgroundColor}
+            $headerBackgroundAlpha={effectiveBackgroundAlpha}
+        >
+            <S.body
+                $status={headerStatus}
+                $extendedHeight={extendedHeight}
+                $condensedHeight={condensedHeight}
+            >
+                <div>
+                    <S.logoButton
+                        type="button"
+                        aria-label="Home"
+                        onClick={goHome}
+                        $status={visibleStatus}
+                        $extendedHeight={extendedHeight}
+                        $condensedHeight={condensedHeight}
+                    >
+                        {logoContent}
+                    </S.logoButton>
+                </div>
+                <div />
+                <div>
+                    <S.input
+                        $height={inputHeight}
+                        aria-label={searchPlaceholder || t("searchInputPlaceholder")}
+                        placeholder={searchPlaceholder || t("searchInputPlaceholder")}
+                        value={searchValue}
+                        onFocus={openMenu}
+                        onChange={(event) => setSearchValue(event.target.value)}
+                    />
+                </div>
+                <div>
+                    <Visibility.mount
+                        visible={menuButtonCloses && nextLanguage}
+                        content={
+                            <Button.amedist
+                                label={LANGUAGE_LABELS[nextLanguage] || nextLanguage?.toUpperCase()}
+                                onClick={switchLanguage}
+                                prefix={{
+                                    flag: LANGUAGE_FLAGS[nextLanguage] || nextLanguage,
+                                    width: 18,
+                                    flat: true,
+                                }}
+                                flat
+                            />
+                        }
+                    />
+                    <Button.plain
+                        onClick={menuButtonCloses ? closeMenu : openMenu}
+                        icon={{
+                            ...(menuButtonCloses ? closeIconProps : openIconProps),
+                            color: effectiveColor,
+                            hoverColor: effectiveColor,
+                            activeColor: effectiveColor,
+                        }}
+                        bgColor="transparent"
+                        hoverBgColor="transparent"
+                        activeBgColor="transparent"
+                        size={160}
+                        flat
+                    />
+                </div>
+            </S.body>
+        </S.container>
+    );
+};
+
+HeaderAmedist.displayName = "Layout.headerAmedist";
+HeaderAmedist.layoutControllerName = "headerAmedist";
+
+export default HeaderAmedist;

package/src/libs/Layout/index.js

@@ -0,0 +1,51 @@
+import { createElement } from "react";
+import { Visibility } from "../Visibility";
+import { ControllerError } from "./ControllerError";
+import {
+    registerLayoutControllerFactory,
+    useLayout,
+    useLayoutControllerOwner,
+} from "./controllerRegistry";
+import {
+    createBasicLayoutController,
+    createFooterAmedistController,
+    createHeaderAmedistController,
+} from "./controllers";
+import FooterAmedist from "./footerAmedist";
+import HeaderAmedist from "./headerAmedist";
+import MainAmedist from "./mainAmedist";
+
+registerLayoutControllerFactory("mainAmedist", createBasicLayoutController);
+registerLayoutControllerFactory("headerAmedist", createHeaderAmedistController);
+registerLayoutControllerFactory("footerAmedist", createFooterAmedistController);
+
+const withLayoutController = (controllerName, Component) => {
+    const LayoutVariant = ({ visible = true, controllerId = "default", ...props }) => {
+        const owner = useLayoutControllerOwner(controllerName, controllerId);
+        const controller = useLayout(controllerName, { controllerId: owner.controllerId });
+
+        if (owner.hasDuplicateController) {
+            return createElement(ControllerError, {
+                controllerName,
+                controllerId: owner.controllerId,
+            });
+        }
+
+        return createElement(Visibility, {
+            visible: visible && controller.visible !== false,
+            content: createElement(Component, { ...props, controllerId: owner.controllerId }),
+        });
+    };
+
+    LayoutVariant.displayName = Component.displayName;
+    LayoutVariant.layoutControllerName = controllerName;
+    return LayoutVariant;
+};
+
+export const Layout = {
+    mainAmedist: withLayoutController("mainAmedist", MainAmedist),
+    headerAmedist: withLayoutController("headerAmedist", HeaderAmedist),
+    footerAmedist: withLayoutController("footerAmedist", FooterAmedist),
+};
+
+export { useLayout };

package/src/libs/Layout/mainAmedist/_styled.js

@@ -0,0 +1,87 @@
+import styled, { css, keyframes } from "styled-components";
+
+const open = keyframes`
+    from {
+        transform: translateY(-20rem);
+        clip-path: inset(0 0 100% 0);
+    }
+    to {
+        transform: translateY(0);
+        clip-path: inset(0 0 0 0);
+    }
+`;
+
+const close = keyframes`
+    from {
+        transform: translateY(0);
+        clip-path: inset(0 0 0 0);
+    }
+    to {
+        transform: translateY(-20rem);
+        clip-path: inset(0 0 100% 0);
+    }
+`;
+
+export const S = {
+    container: styled.div`
+        --layout-header-extended-height: ${({ $extendedHeight }) => $extendedHeight}rem;
+        --layout-header-condensed-height: ${({ $condensedHeight }) => $condensedHeight}rem;
+        width: 100%;
+        min-height: 100%;
+    `,
+    pageContent: styled.div`
+        position: relative;
+        width: 100%;
+        min-height: 100vh;
+    `,
+    main: styled.main`
+        width: 100%;
+        min-height: 100vh;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+    `,
+    menuArea: styled.div`
+        position: absolute;
+        inset: 0 0 auto 0;
+        z-index: 3;
+        width: 100%;
+        min-height: 100vh;
+        padding: 100rem;
+        padding-top: calc(var(--layout-header-extended-height) + 75rem);
+        box-sizing: border-box;
+        background-color: ${({ theme }) => theme.backgrounds?.shade15 || theme.background};
+        animation: ${open} 0.5s ease both;
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+
+        ${({ theme }) =>
+            theme.responsive(
+                "phone",
+                css`
+                    /* Phone: the menu is a full screen surface that scrolls its own
+                       content, so no dead band is ever left at the bottom. */
+                    position: fixed;
+                    inset: 0;
+                    min-height: 0;
+                    overflow-y: auto;
+                    overscroll-behavior: contain;
+                    -webkit-overflow-scrolling: touch;
+                    padding: 25rem;
+                    padding-top: calc(var(--layout-header-extended-height) + 25rem);
+                `,
+            )};
+
+        ${({ $closing }) =>
+            $closing &&
+            css`
+                animation-name: ${close};
+            `}
+    `,
+    footerBoundary: styled.div`
+        position: relative;
+        z-index: 5;
+        isolation: isolate;
+        width: 100%;
+    `,
+};

package/src/libs/Layout/mainAmedist/index.jsx

@@ -0,0 +1,45 @@
+import { Visibility } from "../../Visibility";
+import { useLayout } from "../controllerRegistry";
+import { S } from "./_styled";
+
+const getVariantControllerName = (element, fallback) =>
+    element?.type?.layoutControllerName || fallback;
+
+const MainAmedist = ({ controllerId = "default", header, footer, menuContent, children }) => {
+    const headerControllerName = getVariantControllerName(header, "headerAmedist");
+    const headerControllerId = header?.props?.controllerId || controllerId;
+    const headerController = useLayout(headerControllerName, {
+        controllerId: headerControllerId,
+    });
+    const { menuStatus = "closed", extendedHeight = 100, condensedHeight = 50 } = headerController;
+    const outletVisible = menuStatus === "closed" || menuStatus === "closing";
+    const menuVisible = menuStatus !== "closed";
+
+    return (
+        <S.container $extendedHeight={extendedHeight} $condensedHeight={condensedHeight}>
+            <S.pageContent>
+                {header}
+                <S.main aria-label="main">
+                    <Visibility visible={outletVisible} content={children} />
+                    <Visibility.mount
+                        visible={menuVisible}
+                        content={
+                            <S.menuArea $closing={menuStatus === "closing"}>
+                                {menuContent}
+                            </S.menuArea>
+                        }
+                    />
+                </S.main>
+            </S.pageContent>
+            <Visibility
+                visible={outletVisible}
+                content={<S.footerBoundary>{footer}</S.footerBoundary>}
+            />
+        </S.container>
+    );
+};
+
+MainAmedist.displayName = "Layout.mainAmedist";
+MainAmedist.layoutControllerName = "mainAmedist";
+
+export default MainAmedist;