@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -1,155 +1,235 @@
-import React, {useEffect, useState} from "react"
+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 {
-    header: React.ReactNode;
-    aside: React.ReactNode;
-    content: React.ReactNode;
-    contentNav?: React.ReactNode;
+    children: React.ReactNode;
 
-    subheader?: React.ReactNode;
-    layoutSize?: "large"
+    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)
 
-    const {hideMainHeader} = props.subheader ? useSubHeader() : {hideMainHeader: false}
+    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;
 
-    return <div className={cn.LayoutPrimaryHost}>
-        <header className={` 
-            ${cn.LayoutPrimaryHeader}
-            ${props.subheader && cn.LayoutPrimaryHeaderSub}
-            ${hideMainHeader && cn.LayoutPrimaryHeaderHideMain}
-        `}>
-            <div className={cn.LayoutPrimaryHeaderContent}>
+    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
-                    className={cn.LayoutPrimaryHamburgerButton}
-                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                    part="hamburger-button"
                     aria-label="Toggle navigation menu"
+                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
                 >
-                    <div className={cn.LayoutPrimaryHamburgerIcon}>
-                        <span
-                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
-                        <span
-                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
-                        <span
-                            className={`${cn.LayoutPrimaryHamburgerLine} ${isMobileNavOpen ? cn.LayoutPrimaryHamburgerLineOpen : ''}`}/>
+                    <div part="hamburger-icon">
+                        <$HamburgerLine active={isMobileNavOpen} />
+                        <$HamburgerLine active={isMobileNavOpen} />
+                        <$HamburgerLine active={isMobileNavOpen} />
                     </div>
                 </button>
             </div>
+
             {props.subheader}
         </header>
+    </>
+}
 
-        {/* Mobile Drawer Sidebar */}
+interface LayoutPrimaryMobileAsideProps {
+    aside: React.ReactNode;
+}
+LayoutPrimary.MobileAside = function LayoutPrimaryAside(props: LayoutPrimaryMobileAsideProps) {
+    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)
+    return <>
         <div
-            className={`${cn.LayoutPrimaryOverlay} ${isMobileNavOpen ? cn.LayoutPrimaryOverlayVisible : ''}`}
+            part="mobile-overlay"
+            data-active={isMobileNavOpen}
             onClick={() => setIsMobileNavOpen(false)}
         />
-        <aside className={`
-            ${cn.LayoutPrimaryMobileSidebar}
-            ${isMobileNavOpen ? cn.LayoutPrimaryMobileSidebarOpen : ''}
-        `}>
-            <div className={cn.LayoutPrimarySidebarContent}>
+        <aside
+            part="mobile-sidebar"
+            data-active={isMobileNavOpen}
+        >
+            <div part="mobile-sidebar-aside">
                 {props.aside}
             </div>
             <button
-                className={cn.LayoutPrimaryCloseButton}
-                onClick={() => setIsMobileNavOpen(false)}
+                part="mobile-sidebar-close-button"
                 aria-label="Close navigation menu"
+                onClick={() => setIsMobileNavOpen(false)}
             >
-                <div className={cn.LayoutPrimaryCloseIcon}/>
+                <div part="mobile-sidebar-close-icon" />
             </button>
         </aside>
+    </>
+}
 
-        <main className={`
-            ${cn.LayoutPrimaryMain}
-            ${!hideMainHeader && props.subheader && cn.LayoutPrimaryMainSub}
-        `}>
-            {/* Desktop Static Sidebar */}
-            <aside className={cn.LayoutPrimaryStaticSidebar}>
-                {props.aside}
-            </aside>
-
-            <div className={cn.LayoutPrimaryPageHost}>
-                <div className={cn.LayoutPrimaryPageScroll}>
-                    <div className={`
-                        ${cn.LayoutPrimaryPageContainer}
-                        ${props.layoutSize == "large" && cn.LayoutPrimaryPageContainerLarge}
-                    `}>
-                        <div className={cn.LayoutPrimaryPageArticleContainer}>
-                            <article className={cn.LayoutPrimaryArticleHost}>
-                                <section className={cn.LayoutPrimaryArticleContent}>
-                                    {props.content}
-                                </section>
-                            </article>
-                            {props.contentNav && <nav className={cn.LayoutPrimaryArticleNav}>
+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>
+                            </nav>
+                        }
                     </div>
                 </div>
             </div>
-        </main>
-    </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
-function useSubHeader() {
+// TODO  better solution than `key`
+function useSubHeader(ref: React.RefObject<HTMLDivElement | Window | null> | null, key?: any) {
     const [hideMainHeader, setHideMainHeader] = useState(false)
-    const [scrollTop, setScrollTop] = useState(0)
-    const [controlScrollPos, setControlScrollPos] = useState(0)
+    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(() => {
-        if (scrollTop === controlScrollPos) {
+        reset()
+    }, [key])
+
+    function onScroll(e: Event) {
+        if (!(e.target instanceof HTMLElement)) {
             return
         }
 
-        const checkpoint = parseInt(cn.globalHeaderHeight, 10) / 2
-        const diff = scrollTop - controlScrollPos
-        const reversePosDiff = Math.abs(scrollTop - controlScrollPos)
+        const currentScrollTop = e.target.scrollTop
 
-        if (diff > checkpoint) {
-            setHideMainHeader(true)
-        } else if (reversePosDiff > checkpoint) {
+        // 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
         }
-    }, [
-        scrollTop,
-        controlScrollPos,
-    ]);
 
-    function onScroll(e: Event) {
-        if (!(e.target instanceof HTMLElement)) {
-            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)
         }
 
-        const scroll = e.target?.scrollTop
-        setScrollTop(scroll)
-    }
+        // Calculate total scroll distance from start position
+        const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPosition)
 
-    function onScrollFinish(e: Event) {
-        if (!(e.target instanceof HTMLElement)) {
-            return
+        // 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)
         }
 
-        setControlScrollPos(e.target?.scrollTop)
+        setLastScrollTop(currentScrollTop)
     }
 
-    // TODO: by ref?
-    // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)
     useEffect(() => {
-        document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.addEventListener("scrollend", onScrollFinish)
+        if (!ref?.current) {
+            return
+        }
+
+        ref.current.addEventListener("scroll", onScroll)
 
         return () => {
-            document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${cn.LayoutPrimaryPageScroll}`)?.removeEventListener("scrollend", onScrollFinish)
+            ref.current?.removeEventListener("scroll", onScroll)
         }
-    }, []);
+    }, [ref, key, lastScrollTop, scrollDirection, scrollThreshold, scrollStartPosition]);
 
     return {
         hideMainHeader,

package/src/layouts/LayoutPrimary/index.ts

@@ -1,5 +1,3 @@
 export {
     LayoutPrimary
 } from "./LayoutPrimary";
-
-export type {LayoutPrimaryProps} from "./LayoutPrimary";

package/src/layouts/index.ts

@@ -2,12 +2,5 @@
 
 export {
     LayoutPrimary,
-    type LayoutPrimaryProps
 } from "./LayoutPrimary";
 
-export {
-    Layout
-} from "./Layout";
-
-export type {LayoutProps} from "./Layout";
-

package/src/system/SearchButton/SearchButton.styles.tsx

@@ -0,0 +1,86 @@
+import { css } from "@linaria/core";
+
+export const SearchButton = css`
+    @layer defaults {
+        background-color: transparent;
+        border-radius: 8px;
+        border: 1px solid var(--dark32);
+        color: var(--text-primary);
+        background: var(--dark16);
+        font-size: var(--xyd-font-size-small);
+        font-weight: var(--xyd-font-weight-semibold);
+        height: 36px;
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        flex: 1;
+
+        padding: 0 8px;
+        margin: 12px 0 0;
+        user-select: none;
+        width: 100%;
+        transition: border-color .15s ease;
+
+        
+        max-width: 300px;
+        margin: 0;
+
+        cursor: pointer;
+
+        &:hover {
+            background: var(--dark16);
+            box-shadow: none;
+            color: var(--dark48);
+            outline: none;
+
+            box-shadow: none;
+            border-color: var(--dark48);
+        }
+        
+        [part="container"] {
+            align-items: center;
+            display: flex;
+        }
+
+        [part="placeholder"] {
+            display: block !important;
+            font-size: var(--xyd-font-size-small);
+            color: var(--dark48);
+            font-weight: var(--xyd-font-weight-normal);
+        }
+
+        [part="icon"] {
+            stroke-width: 1.4;
+            color: var(--dark48) !important;
+            height: 15px;
+            transition: color .15s var(--cubic-enter);
+        }
+        
+
+        [part="keys"] {
+            display: flex;
+            gap: 4px;
+            min-width: auto;
+        }
+
+        [part="key"] {
+            align-items: center;
+            background: var(--dark16);
+            border-radius: 3px;
+            box-shadow: none;
+            color: var(--dark48);
+            display: flex;
+            height: 18px;
+            line-height: 18px;
+            justify-content: center;
+            font-size: 12px;
+            letter-spacing: 1px;
+            position: relative;
+            padding: 0;
+            margin: 0;
+            border: 0px;
+            top: 0;
+            width: 20px;
+        }
+    }
+`

package/src/system/SearchButton/SearchButton.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react';
+
+import * as cn from "./SearchButton.styles";
+
+interface SearchButtonProps {
+  onClick?: () => void;
+  placeholder?: string;
+  shortcutKeys?: string[];
+}
+
+export function SearchButton({
+  shortcutKeys = ['⌘', 'K'],
+  ...props
+}: SearchButtonProps) {
+  useShortcuts(shortcutKeys, () => props.onClick?.());
+
+  useEffect(() => {
+    // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod
+    window.__UNSAFE_xyd_search_button_inited = true
+
+    return () => {
+      // @ts-ignore
+      window.__UNSAFE_xyd_search_button_inited = false
+    }
+  }, [])
+
+  return (
+    <xyd-search-button
+      className={cn.SearchButton}
+      aria-label="Search"
+      onClick={props.onClick}
+    >
+      <span part="container">
+        <svg
+          width={20}
+          height={20}
+          part="icon"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+            stroke="currentColor"
+            fill="none"
+            fillRule="evenodd"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span part="placeholder">{props.placeholder || "Search"}</span>
+      </span>
+
+      {
+        shortcutKeys.length > 0 && (
+          <span part="keys">
+            {shortcutKeys.map((key, index) => (
+              <kbd key={index} part="key">{key}</kbd>
+            ))}
+          </span>
+        )
+      }
+    </xyd-search-button>
+  )
+}
+
+function useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {
+  // Keep latest handler reference to avoid stale closures
+  const savedHandler = useRef(onTrigger);
+
+  useEffect(() => {
+    savedHandler.current = onTrigger;
+  }, [onTrigger]);
+
+  useEffect(() => {
+    // @ts-ignore
+    if (window.__UNSAFE_xyd_search_button_inited) {
+      return
+    }
+
+    const listener = (event: KeyboardEvent) => {
+      // For single key shortcuts
+      if (shortcutKeys.length === 1) {
+        if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {
+          event.preventDefault();
+
+          savedHandler.current();
+        }
+        return;
+      }
+
+      // For modifier combinations
+      if (shortcutKeys.length === 2) {
+        const [modifier, key] = shortcutKeys;
+        const pressedKey = event.key.toLowerCase();
+
+        const isModifierMatch =
+          (modifier === '⌘' && event.metaKey) ||
+          (modifier === 'Ctrl' && event.ctrlKey);
+
+        if (isModifierMatch && pressedKey === key.toLowerCase()) {
+          event.preventDefault();
+
+          savedHandler.current();
+        }
+      }
+    };
+
+    // Use capture phase and listen to both keydown and keyup
+    window.addEventListener('keydown', listener, { capture: true });
+    window.addEventListener('keyup', listener, { capture: true });
+
+    return () => {
+      window.removeEventListener('keydown', listener, { capture: true });
+      window.removeEventListener('keyup', listener, { capture: true });
+    };
+  }, []);
+}

package/src/system/SearchButton/index.ts

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

package/src/system/index.ts

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

package/src/writer/Anchor/Anchor.styles.tsx

@@ -0,0 +1,11 @@
+import {css} from "@linaria/core";
+
+export const AnchorHost = css`
+    @layer defaults {
+        color: var(--xyd-anchor-color);
+
+        &:hover {
+            color: var(--xyd-anchor-color--hover);
+        }
+    }
+`; 

package/src/{content → writer}/Anchor/Anchor.tsx

@@ -1,53 +1,51 @@
-import React, {forwardRef} from 'react'
-import type {ComponentProps, ReactElement} from 'react'
+import React, { forwardRef } from 'react'
+import type { ComponentProps, ReactElement } from 'react'
+
 import * as cn from "./Anchor.styles";
 
 export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
     newWindow?: boolean
+    as?: React.ElementType
 }
 
-// TODO: where react-router?
-
 export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
-    {href = '', children, newWindow},
+    { href = '', children, newWindow, as, ...props },
     // ref is used in <NavbarMenu />
     forwardedRef
 ): ReactElement {
+    const Link = as || $Anchor
+
     if (newWindow) {
         return (
-            <a
+            <Link
                 ref={forwardedRef}
                 href={href}
                 target="_blank"
                 rel="noreferrer"
                 className={cn.AnchorHost}
+                {...props}
             >
                 {children}
-            </a>
-        )
-    }
-
-    if (!href) {
-        return (
-            <a
-                ref={forwardedRef}
-                href={href}
-                className={cn.AnchorHost}
-            >
-                {children}
-            </a>
+            </Link>
         )
     }
 
     return (
-        <a
+        <Link
             ref={forwardedRef}
-            href={href}
             className={cn.AnchorHost}
+            href={href || undefined}
+            {...props}
         >
             {children}
-        </a>
+        </Link>
     )
 })
 
 Anchor.displayName = 'Anchor'
+
+function $Anchor({ children, ...rest }) {
+    return <a {...rest}>
+        {children}
+    </a>
+}

package/src/writer/Anchor/index.tsx

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