@xyd-js/components 0.1.0-build.168

package/src/kit/Loader/Loader.styles.tsx

@@ -0,0 +1,53 @@
+import { css } from "@linaria/core";
+
+export const LoaderHost = css`
+    @keyframes pulse {
+        0%, 80%, 100% { 
+            transform: scale(0.6);
+            opacity: 0.4;
+        }
+        40% { 
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+
+    @layer defaults {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        &[data-size="small"] {
+            width: 6px;
+            height: 6px;
+        }
+        &[data-size="large"] {
+            width: 12px;
+            height: 12px;
+        }
+
+        [part="dots"] {
+            display: flex;
+            gap: 4px;
+        }
+
+        [part="dot"] {
+            width: 8px;
+            height: 8px;
+            background-color: currentColor;
+            border-radius: 50%;
+            animation: pulse 1.4s infinite ease-in-out;
+            opacity: 0.6;
+
+            &:nth-of-type(2) {
+                animation-delay: 0.2s;
+            }
+
+            &:nth-of-type(3) {
+                animation-delay: 0.4s;
+            }
+        }
+    }
+`;
+
+

package/src/kit/Loader/Loader.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import * as cn from "./Loader.styles";
+
+export interface LoaderProps {
+    size?: "small" | "medium" | "large";
+    className?: string;
+}
+
+export function Loader({size = "medium", className}: LoaderProps) {
+    return (
+        <xyd-loader
+            data-size={size}
+            className={` ${cn.LoaderHost} ${className || ""} `}
+        >
+            <div part="dots">
+                <div part="dot"/>
+                <div part="dot"/>
+                <div part="dot"/>
+            </div>
+        </xyd-loader>
+    );
+} 

package/src/kit/TODO.md

@@ -0,0 +1,2 @@
+rename to `@xyd-js/components/kit` /  `@xyd-js/components/ui-kit` ?
+

package/src/kit/index.ts

@@ -0,0 +1 @@
+export * from "./Loader/Loader"; 

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

@@ -0,0 +1,325 @@
+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;
+            flex-direction: column;
+
+            @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="header-subheader"] {
+            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;
+            min-height: calc(100vh - (var(--xyd-nav-height) + var(--xyd-banner-height)))
+        }
+
+        [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"] {
+            align-items: center;
+            background: none;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            height: 32px;
+            justify-content: center;
+            padding: 0;
+            position: absolute;
+            right: -3px;
+            top: 0px;
+            width: 32px;
+            z-index: 10;
+        }
+
+        [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;
+            }
+        }
+        &[data-layout="wide"] [part="page-scroll"] {
+            padding-top: 15px;
+        }
+
+        [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"] {
+            --page-article-nav-top: calc(var(--xyd-header-total-height) / 2);
+            display: flex;
+            flex: none;
+            flex-direction: column;
+            gap: 16px;
+            width: var(--xyd-layout-nav-width-medium);
+            position: sticky;
+            height: fit-content;
+            max-height: 100vh;
+            overflow-y: auto;
+            padding-right: 24px;
+            padding: var(--xyd-content-space) 0;
+            margin-top: var(--page-article-nav-top);
+            top: calc(var(--xyd-header-total-height) + var(--page-article-nav-top));
+            /* top: var(--xyd-header-total-height); */
+
+
+            @media (max-width: ${tabletBreakpoint}) {
+                width: var(--xyd-layout-nav-width-small);
+                padding-right: 16px;
+            }
+
+            @media (max-width: ${mobileBreakpoint}) {
+                display: none;
+            }
+        }
+    }
+
+    @layer defaultfix {
+        > [part="header"]:has(xyd-banner) {
+            height: auto;
+        }
+    }
+`;
+

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -0,0 +1,252 @@
+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
+    id?: 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}
+            id={props.id}
+        >
+            {props.children}
+        </xyd-layout-primary>
+    </LayoutPrimaryContext>
+}
+
+interface LayoutPrimaryHeaderProps {
+    header: React.ReactNode;
+
+    banner?: React.ReactNode;
+    subheader?: React.ReactNode;
+}
+LayoutPrimary.Header = function LayoutPrimaryHeader(props: LayoutPrimaryHeaderProps) {
+    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)
+
+    return <>
+        <header part="header">
+            {props.banner}
+
+            <div part="header-content">
+                {props.header}
+            </div>
+
+            {props.subheader && <div part="header-subheader">
+                {props.subheader}
+            </div>}
+        </header>
+    </>
+}
+
+LayoutPrimary.Hamburger = function LayoutPrimaryHamburger() {
+    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)
+    return <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>
+}
+
+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>
+            <div>
+                <button
+                    part="mobile-sidebar-close-button"
+                    aria-label="Close navigation menu"
+                    onClick={() => setIsMobileNavOpen(false)}
+                >
+                    <div part="mobile-sidebar-close-icon" />
+                </button>
+            </div>
+        </aside>
+    </>
+}
+
+interface LayoutPrimaryPageProps {
+    children: React.ReactNode;
+    contentNav?: React.ReactNode;
+    after?: 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>
+            {props.after}
+        </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

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