@xyd-js/components 0.1.0-xyd.4 → 0.1.0-xyd.52

package/src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx

@@ -0,0 +1,305 @@
+import {css} from "@linaria/core";
+
+// TODO: in the futre better media queries
+const tabletBreakpoint = '1024px';
+const mobileBreakpoint = '768px';
+
+export const LayoutPrimaryHost = css`
+    @layer defaults {
+        width: 100%;
+        overflow-x: hidden;
+        background: var(--xyd-page-body-bgcolor);
+        display: contents;
+
+        > [part="header"] {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            right: var(--xyd-page-gutter);
+            left: var(--xyd-page-gutter);
+            height: var(--xyd-nav-height);
+            background: var(--xyd-layout-header-bgcolor);
+            z-index: 3;
+
+            @media (max-width: ${mobileBreakpoint}) {
+                padding: 0;
+            }
+        }
+
+        &[data-hide-subheader="true"] > [part="header"] {
+            transform: translateY(calc(-1 * var(--xyd-nav-height)));
+        }
+        &[data-hide-subheader="true"] > [part="header"] > [part="header-content"] {
+            visibility: hidden;
+        }
+
+        &[data-subheader="true"] > [part="header"] {
+            flex-direction: column;
+            height: var(--xyd-header-total-height);
+            transition: transform 200ms;
+        }
+
+        [part="header-content"] {
+            display: flex;
+            align-items: center;
+            width: 100%;
+        }
+
+        [part="hamburger-button"] {
+            display: none;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                border: none;
+                background: none;
+                cursor: pointer;
+                padding: 0;
+            }
+        }
+
+        [part="hamburger-icon"] {
+            width: 24px;
+            height: 24px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        [part="hamburger-line"] {
+            width: 100%;
+            height: 2px;
+            background: var(--xyd-page-body-color);
+            transition: transform 0.3s var(--xyd-cubic-bezier);
+
+            &[data-active="true"] {
+                &:first-child {
+                    transform: translateY(11px) rotate(45deg);
+                }
+
+                &:nth-child(2) {
+                    opacity: 0;
+                }
+
+                &:last-child {
+                    transform: translateY(-11px) rotate(-45deg);
+                }
+            }
+        }
+
+        [part="main"] {
+            position: relative;
+            display: flex;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: var(--xyd-page-gutter);
+            overflow: visible;
+        }
+
+        [part="sidebar"] {
+            flex: none;
+            width: var(--xyd-sidebar-width);
+            background: var(--xyd-layout-sidebar-bgcolor);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            height: 100%;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: none;
+            }
+        }
+
+        [part="mobile-sidebar"] {
+            display: none;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: flex;
+                position: fixed;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: var(--xyd-sidebar-width--mobile);
+                background: var(--xyd-layout-sidebar-bgcolor);
+                flex-direction: column;
+                z-index: 50;
+                transform: translateX(-100%);
+                transition: transform .3s var(--xyd-cubic-bezier);
+                box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
+            }
+
+            &[data-active="true"] {
+                @media (max-width: ${tabletBreakpoint}) {
+                    transform: translateX(0);
+                }
+            }
+        }
+
+        [part="mobile-sidebar-aside"] {
+            flex: 1;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            height: 100%;
+        }
+
+        [part="mobile-sidebar-close-button"] {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: none;
+            padding: 0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        [part="mobile-sidebar-close-icon"] {
+            width: 20px;
+            height: 20px;
+            position: relative;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background: var(--xyd-page-body-color--secondary);
+                transform-origin: center;
+            }
+
+            &::before {
+                transform: rotate(45deg);
+            }
+
+            &::after {
+                transform: rotate(-45deg);
+            }
+        }
+
+        [part="mobile-overlay"] {
+            display: none;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                display: block;
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                background: rgba(0, 0, 0, 0.6);
+                transition: opacity .3s;
+                opacity: 0;
+                pointer-events: none;
+                z-index: 40;
+                height: 100vh;
+            }
+
+            &[data-active="true"] {
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
+
+        [part="page"] {
+            position: relative;
+            overflow: visible;
+            flex: 1;
+            background: var(--xyd-page-body-bgcolor);
+            min-width: 0;
+            height: 100%;
+        }
+
+        [part="page-scroll"] {
+            overflow-y: visible;
+            height: 100%;
+            -webkit-overflow-scrolling: touch;
+            padding: 0 48px;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                padding: 0 32px;
+            }
+
+            @media (max-width: ${mobileBreakpoint}) {
+                padding: 0 24px;
+            }
+        }
+
+        [part="page-container"] {
+            max-width: var(--xyd-layout-width-medium);
+            margin: 0 auto;
+            padding: 0 var(--xyd-page-gutter);
+            height: 100%;
+        }
+
+        &[data-layout="wide"] [part="page-container"] {
+            max-width: var(--xyd-layout-width-large);
+        }
+
+        [part="page-article-container"] {
+            display: flex;
+            gap: 48px;
+            padding: 48px 0;
+            min-height: 100%;
+
+            @media (max-width: ${tabletBreakpoint}) {
+                gap: 32px;
+            }
+
+            @media (max-width: ${mobileBreakpoint}) {
+                flex-direction: column;
+                padding: 24px 0;
+                gap: 24px;
+            }
+
+        }
+
+        [part="page-article"] {
+            flex: 1;
+            min-width: 0;
+        }
+
+        [part="page-article-content"] {
+            width: 100%;
+        }
+
+        [part="page-article-nav"] {
+            display: flex;
+            flex: none;
+            flex-direction: column;
+            gap: 16px;
+            width: var(--xyd-layout-nav-width-medium);
+            position: sticky;
+            top: var(--xyd-header-total-height);
+            height: fit-content;
+            max-height: 100vh;
+            overflow-y: auto;
+            padding-right: 24px;
+            padding-top: var(--xyd-content-space);
+
+            @media (max-width: ${tabletBreakpoint}) {
+                width: var(--xyd-layout-nav-width-small);
+                padding-right: 16px;
+            }
+
+            @media (max-width: ${mobileBreakpoint}) {
+                display: none;
+            }
+        }
+    }
+`;
+

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -0,0 +1,237 @@
+import * as React from 'react'
+import { useContext, useEffect, useRef, useState } from "react"
+
+import { PageLayout } from '@xyd-js/core';
+
+import * as cn from "./LayoutPrimary.styles"
+
+export interface LayoutPrimaryProps {
+    children: React.ReactNode;
+
+    subheader?: boolean;
+    className?: string;
+    layout?: PageLayout
+    scrollKey?: string
+}
+
+const LayoutPrimaryContext = React.createContext<{
+    scrollRef: React.RefObject<HTMLDivElement | Window | null>;
+    isMobileNavOpen: boolean;
+    setIsMobileNavOpen: (isOpen: boolean) => void;
+}>({
+    scrollRef: React.createRef(),
+    isMobileNavOpen: false,
+    setIsMobileNavOpen: () => { },
+})
+
+// TODO: move scroller to xyd-foo
+export function LayoutPrimary(props: LayoutPrimaryProps) {
+    const scrollRef = useRef<HTMLDivElement | Window>(null)
+    const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)
+    const { hideMainHeader } = useSubHeader(props.subheader ? scrollRef : null, props.scrollKey)
+
+    useEffect(() => {
+        scrollRef.current = window
+    }, [])
+
+    return <LayoutPrimaryContext value={{
+        scrollRef,
+        isMobileNavOpen,
+        setIsMobileNavOpen
+    }}
+    >
+        <xyd-layout-primary
+            className={`${cn.LayoutPrimaryHost} ${props.className || ""}`}
+            data-subheader={String(!!props.subheader)}
+            data-hide-subheader={String(hideMainHeader)}
+            data-layout={props.layout}
+        >
+            {props.children}
+        </xyd-layout-primary>
+    </LayoutPrimaryContext>
+}
+
+interface LayoutPrimaryHeaderProps {
+    header: React.ReactNode;
+
+    subheader?: React.ReactNode;
+}
+LayoutPrimary.Header = function LayoutPrimaryHeader(props: LayoutPrimaryHeaderProps) {
+    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)
+
+    return <>
+        <header part="header">
+            <div part="header-content">
+                {props.header}
+                <button
+                    part="hamburger-button"
+                    aria-label="Toggle navigation menu"
+                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                >
+                    <div part="hamburger-icon">
+                        <$HamburgerLine active={isMobileNavOpen} />
+                        <$HamburgerLine active={isMobileNavOpen} />
+                        <$HamburgerLine active={isMobileNavOpen} />
+                    </div>
+                </button>
+            </div>
+
+            {props.subheader}
+        </header>
+    </>
+}
+
+interface LayoutPrimaryMobileAsideProps {
+    aside: React.ReactNode;
+}
+LayoutPrimary.MobileAside = function LayoutPrimaryAside(props: LayoutPrimaryMobileAsideProps) {
+    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)
+    return <>
+        <div
+            part="mobile-overlay"
+            data-active={isMobileNavOpen}
+            onClick={() => setIsMobileNavOpen(false)}
+        />
+        <aside
+            part="mobile-sidebar"
+            data-active={isMobileNavOpen}
+        >
+            <div part="mobile-sidebar-aside">
+                {props.aside}
+            </div>
+            <button
+                part="mobile-sidebar-close-button"
+                aria-label="Close navigation menu"
+                onClick={() => setIsMobileNavOpen(false)}
+            >
+                <div part="mobile-sidebar-close-icon" />
+            </button>
+        </aside>
+    </>
+}
+
+interface LayoutPrimaryPageProps {
+    children: React.ReactNode;
+    contentNav?: React.ReactNode;
+}
+LayoutPrimary.Page = function LayoutPrimaryPage(props: LayoutPrimaryPageProps) {
+    return <>
+        <div part="page">
+            <div part="page-scroll">
+                <div part="page-container">
+                    <div part="page-article-container">
+
+                        <article part="page-article">
+                            <section part="page-article-content">
+                                {props.children}
+                            </section>
+                        </article>
+
+                        {
+                            props.contentNav && <nav part="page-article-nav">
+                                {props.contentNav}
+                            </nav>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+function $HamburgerLine({ active }: { active: boolean }) {
+    return <span
+        part="hamburger-line"
+        data-active={active}
+    />
+}
+
+const SCROLL_DOWN_TRIGGER_THRESHOLD = 200;
+const SCROLL_UP_TRIGGER_THRESHOLD = 100;
+
+// TODO: move to `xyd-foo` or somewhere else
+// TODO  better solution than `key`
+function useSubHeader(ref: React.RefObject<HTMLDivElement | Window | null> | null, key?: any) {
+    const [hideMainHeader, setHideMainHeader] = useState(false)
+    const [lastScrollTop, setLastScrollTop] = useState(0)
+    const [scrollDirection, setScrollDirection] = useState<'up' | 'down' | null>(null)
+    const [scrollThreshold, setScrollThreshold] = useState(0)
+    const [scrollStartPosition, setScrollStartPosition] = useState(0)
+    const [isScrolling, setIsScrolling] = useState(false)
+
+    function reset() {
+        setHideMainHeader(false)
+        setLastScrollTop(0)
+        setScrollDirection(null)
+        setScrollThreshold(0)
+        setScrollStartPosition(0)
+        setIsScrolling(false)
+    }
+
+    useEffect(() => {
+        reset()
+    }, [key])
+
+    function onScroll(e: Event) {
+        if (!(e.target instanceof HTMLElement)) {
+            return
+        }
+
+        const currentScrollTop = e.target.scrollTop
+
+        // Always show header when near the top of the page
+        if (currentScrollTop < SCROLL_UP_TRIGGER_THRESHOLD) {
+            setHideMainHeader(false)
+            setScrollThreshold(0)
+            setLastScrollTop(currentScrollTop)
+            setIsScrolling(false)
+            return
+        }
+
+        // Determine scroll direction
+        const direction = currentScrollTop > lastScrollTop ? 'down' : 'up'
+        
+        // If direction changed, reset scroll tracking
+        if (direction !== scrollDirection) {
+            setScrollDirection(direction)
+            setScrollStartPosition(currentScrollTop)
+            setIsScrolling(true)
+        }
+
+        // Calculate total scroll distance from start position
+        const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPosition)
+
+        // Only trigger header changes if we've scrolled enough distance in the current direction
+        if (direction === 'down' && totalScrollDistance > SCROLL_DOWN_TRIGGER_THRESHOLD) {
+            // When scrolling down, hide header
+            setHideMainHeader(true)
+            setScrollThreshold(currentScrollTop)
+            // Reset scroll tracking after triggering
+            setScrollStartPosition(currentScrollTop)
+        } else if (direction === 'up' && totalScrollDistance > SCROLL_UP_TRIGGER_THRESHOLD) {
+            // When scrolling up, show header
+            setHideMainHeader(false)
+            setScrollThreshold(currentScrollTop)
+            // Reset scroll tracking after triggering
+            setScrollStartPosition(currentScrollTop)
+        }
+
+        setLastScrollTop(currentScrollTop)
+    }
+
+    useEffect(() => {
+        if (!ref?.current) {
+            return
+        }
+
+        ref.current.addEventListener("scroll", onScroll)
+
+        return () => {
+            ref.current?.removeEventListener("scroll", onScroll)
+        }
+    }, [ref, key, lastScrollTop, scrollDirection, scrollThreshold, scrollStartPosition]);
+
+    return {
+        hideMainHeader,
+    }
+}

package/src/layouts/LayoutPrimary/index.ts

@@ -0,0 +1,3 @@
+export {
+    LayoutPrimary
+} from "./LayoutPrimary";

package/src/layouts/index.ts

@@ -1,7 +1,6 @@
 // TODO: move this pkg @xyd-js/layouts ?
 
 export {
-    Layout
-} from "./Layout";
+    LayoutPrimary,
+} from "./LayoutPrimary";
 
-export type {LayoutProps} from "./Layout";

package/src/pages/HomePage/HomePage.styles.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+
+export const HomePageCardsHost = css`
+    display: grid;
+    grid-template-columns: repeat(2, 500px);
+    justify-content: center;
+    gap: 30px;
+
+    @media (max-width: 1200px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`; 

package/src/pages/HomePage/HomePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {css} from "@linaria/core";
+import * as cn from "./HomePage.styles";
 
 import {
     GuideCard,
@@ -9,23 +9,6 @@ import {HomeView} from "../../views"
 
 import {IHomePageHero, IHomePageFeature} from "./types";
 
-const $cards = {
-    host: css`
-        display: grid;
-        grid-template-columns: repeat(2, 500px);
-        justify-content: center;
-        gap: 30px;
-
-        @media (max-width: 1200px) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-        }
-    `,
-}
-
 export interface HomePageProps {
     header: React.ReactNode
 
@@ -50,11 +33,14 @@ export function HomePage(props: HomePageProps) {
 }
 
 function $Hero(props: HomePageProps) {
+    const subtitle = typeof props.hero?.subtitle === 'string' 
+        ? props.hero.subtitle 
+        : props.hero?.subtitle?.toString() || "";
+
     return <CTABanner>
         <CTABanner.Heading
             title={props.hero?.text || ""}
-            headingEffect={props.hero?.textEffect}
-            subtitle={props.hero?.subtitle}
+            subtitle={subtitle}
         />
         {props?.hero?.actions && <CTABanner.ButtonGroup>
             {props?.hero?.actions.map((action, index) => (
@@ -72,7 +58,7 @@ function $Cards(props: HomePageProps) {
     // TODO: cards gridTemplateColumns based on elements
     return <div
         className={`
-            ${$cards.host}
+            ${cn.HomePageCardsHost}
             xyd_page-comp-homepage-cards
         `}>
         {props.features?.map((feat, index) => (

package/src/pages/TODO.md

@@ -0,0 +1 @@
+move to `@xyd-js/pages` ?