@xyd-js/components 0.1.0-xyd.7 → 0.1.0-xyd.94

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -1,158 +1,235 @@
-import React, {useEffect, useState} from "react"
+import * as React from 'react'
+import { useContext, useEffect, useRef, useState } from "react"
 
-import {$layout, $page, $article, globalHeaderHeight} from "./LayoutPrimary.styles.tsx"
+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;
+
+    subheader?: React.ReactNode;
+}
+LayoutPrimary.Header = function LayoutPrimaryHeader(props: LayoutPrimaryHeaderProps) {
+    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)
 
-    return <div className={$layout.host}>
-        <header className={` 
-            ${$layout.header}
-            ${props.subheader && $layout.header$$sub}
-            ${hideMainHeader && $layout.header$$hideMain}
-        `}>
-            <div className={$layout.primaryHeaderContent}>
+    return <>
+        <header part="header">
+            <div part="header-content">
                 {props.header}
                 <button
-                    className={$layout.hamburgerButton}
-                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                    part="hamburger-button"
                     aria-label="Toggle navigation menu"
+                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
                 >
-                    <div className={$layout.hamburgerIcon}>
-                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
-                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
-                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                    <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={`${$layout.overlay} ${isMobileNavOpen ? $layout.overlay$$visible : ''}`}
+            part="mobile-overlay"
+            data-active={isMobileNavOpen}
             onClick={() => setIsMobileNavOpen(false)}
         />
-        <aside className={`
-            ${$layout.mobileSidebar}
-            ${isMobileNavOpen ? $layout.mobileSidebar$$open : ''}
-        `}>
-            <div className={$layout.sidebarContent}>
+        <aside
+            part="mobile-sidebar"
+            data-active={isMobileNavOpen}
+        >
+            <div part="mobile-sidebar-aside">
                 {props.aside}
             </div>
             <button
-                className={$layout.closeButton}
-                onClick={() => setIsMobileNavOpen(false)}
+                part="mobile-sidebar-close-button"
                 aria-label="Close navigation menu"
+                onClick={() => setIsMobileNavOpen(false)}
             >
-                <div className={$layout.closeIcon}/>
+                <div part="mobile-sidebar-close-icon" />
             </button>
         </aside>
+    </>
+}
 
-        <main className={`
-            ${$layout.main}
-            ${!hideMainHeader && props.subheader && $layout.main$$sub}
-        `}>
-            {/* Desktop Static Sidebar */}
-            <aside className={$layout.staticSidebar}>
-                {props.aside}
-            </aside>
-
-            <div className={$page.host}>
-                <div className={$page.scroll}>
-                    <div className={`
-                        ${$page.container}
-                        ${props.layoutSize == "large" && $page.container$$large}
-                    `}>
-                        <div className={`
-                            ${$page.articleContainer}
-                        `}>
-                            <article className={$article.host}>
-                                <section className={$article.content}>
-                                    {props.content}
-                                </section>
-                                {
-                                    props.contentNav && <nav className={`
-                                    ${$article.nav}
-                                `}>
-                                        {props.contentNav}
-                                    </nav>
-                                }
-                            </article>
-                        </div>
+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>
-        </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(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(`.${$page.scroll}`)?.addEventListener("scroll", onScroll)
-        document.querySelector(`.${$page.scroll}`)?.addEventListener("scrollend", onScrollFinish)
+        if (!ref?.current) {
+            return
+        }
+
+        ref.current.addEventListener("scroll", onScroll)
 
         return () => {
-            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scroll", onScroll)
-            document.querySelector(`.${$page.scroll}`)?.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/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` ?

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/utils/useStyle.ts

@@ -0,0 +1,19 @@
+import {css} from '@linaria/core';
+
+type StyleObject = Record<string, string>;
+type StyleFunction = (strings: TemplateStringsArray, ...values: any[]) => string;
+
+export function useStyle<T extends StyleObject>(component: { styles: T }) {
+    const styled = {} as Record<keyof T, StyleFunction>;
+
+    for (const key of Object.keys(component.styles)) {
+        styled[key as keyof T] = (strings: TemplateStringsArray, ...values: any[]) => {
+            const customStyles = css`
+                ${strings.reduce((result, str, i) => result + str + (values[i] || ''), '')}
+            `;
+            return `${component.styles[key]} ${customStyles}`;
+        };
+    }
+
+    return styled;
+}