@xyd-js/components 0.1.0-build.168

package/src/system/SearchButton/SearchButton.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef } from 'react';
+
+import * as cn from "./SearchButton.styles";
+
+interface SearchButtonProps {
+  onClick?: () => void;
+  placeholder?: string;
+  shortcutKeys?: string[];
+  fullWidth?: boolean;
+}
+
+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}
+      data-fullWidth={props.fullWidth}
+    >
+      <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={`${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,3 @@
+export { Baseline } from "./Baseline";
+export { Footer } from "./Footer";
+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;
+} 

package/src/uxsdk/const.ts

@@ -0,0 +1 @@
+export const EVENT_COMPONENT_TAB_CHANGE = "components.tabs.change"

package/src/uxsdk/index.ts

@@ -0,0 +1,21 @@
+// TODO: move to uxsdk?
+
+export {
+    EVENT_COMPONENT_TAB_CHANGE
+} from "./const";
+
+export {
+    useUXClick,
+} from "./useUXClick";
+
+export {
+    useUXScrollDepth,
+} from "./useUXScrollDepth";
+
+export {
+    useUXEvents,
+} from "./useUXEvents";
+
+export {
+    useUXUnreachableElementTracker,
+} from "./useUXUnreachableElementTracker";

package/src/uxsdk/useUXClick.ts

@@ -0,0 +1,21 @@
+import React, {useState} from "react";
+
+export function useUXClick(
+    openEvent: (data: any) => void,
+    closeEvent: (data: any) => void,
+    getData: () => any
+) {
+    const [open, setOpen] = useState(false);
+
+    return (event: React.MouseEvent) => {
+        const newOpen = !open;
+        setOpen(newOpen);
+
+        const data = getData();
+        if (newOpen) {
+            openEvent(data);
+        } else {
+            closeEvent(data);
+        }
+    };
+}

package/src/uxsdk/useUXEvents.ts

@@ -0,0 +1,105 @@
+import {defineEvents} from 'openux-js'
+
+interface NodeCodeSample {
+    tab?: string
+    example?: string
+    code?: string
+}
+
+interface NodeFramework {
+    location: string
+    uniformRegion?: string
+}
+
+interface AnalyticsNodes {
+    CodeSample: NodeCodeSample
+    Framework: NodeFramework
+}
+
+// TODO: in the future + maybe better API
+// TODO: how to share nodes between packages
+// TODO: node abstraction?
+// TODO: merge abstraction?
+export const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({
+    docs: {
+        code: {
+            example_change({example}: { example: string }) {
+                return {
+                    ...commonFrameworkProps({Framework}),
+                    example: example,
+                }
+            },
+            tab_change({tab}: { tab: string }) {
+                return {
+                    ...commonCodeSampleProps({CodeSample, Framework}),
+                    tab: tab,
+                }
+            },
+            copy({code}: { code: string }) {
+                return {
+                    ...commonCodeSampleProps({CodeSample, Framework}),
+                    code: (code || "").slice(0, 100) + "...",
+                }
+            },
+            scroll_100() {
+                return {
+                    ...commonCodeSampleProps({CodeSample, Framework}),
+                }
+            },
+            scroll_depth({depth}: { depth: number }) {
+                return {
+                    ...commonCodeSampleProps({CodeSample, Framework}),
+                    depth,
+                }
+            },
+        },
+
+        details: {
+            open({label}: { label: string }) {
+                return {
+                    ...commonFrameworkProps({Framework}),
+                    label: label,
+                }
+            },
+            close({label}: { label: string }) {
+                return {
+                    ...commonFrameworkProps({Framework}),
+                    label: label,
+                }
+            }
+        },
+
+        anchor: {
+            click({id}: { id: string }) {
+                return {
+                    ...commonFrameworkProps({Framework}),
+                    id: id,
+                }
+            }
+        }
+    }
+}))
+
+function commonCodeSampleProps({
+                                   CodeSample,
+                                   Framework
+                               }: {
+    CodeSample: NodeCodeSample | undefined
+    Framework: NodeFramework | undefined
+}) {
+    return {
+        ...commonFrameworkProps({Framework}),
+        tab: CodeSample?.tab!,
+        example: CodeSample?.example!,
+    }
+}
+
+function commonFrameworkProps({
+                                  Framework
+                              }: {
+    Framework: NodeFramework | undefined
+}) {
+    return {
+        location: Framework?.location!,
+    }
+}

package/src/uxsdk/useUXScrollDepth.ts

@@ -0,0 +1,49 @@
+import React, {useEffect, useRef} from "react";
+
+export interface ScrollDepthOptions {
+    thresholds?: number[]; // Default: [25, 50, 75, 100]
+    onDepthReached?: (depth: number) => void;
+}
+
+export function useUXScrollDepth(
+    ref: React.RefObject<HTMLElement | null>, 
+    options: ScrollDepthOptions = {}
+) {
+    const { thresholds = [25, 50, 75, 100], onDepthReached } = options;
+    const reachedDepthsRef = useRef<Set<number>>(new Set());
+
+    useEffect(() => {
+        if (!ref.current) {
+            return
+        }
+
+        function handleScroll() {
+            const element = ref.current;
+            if (!element) return;
+
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            
+            // Calculate current scroll percentage
+            const scrollableHeight = scrollHeight - clientHeight;
+            if (scrollableHeight <= 0) return;
+            
+            const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);
+            
+            // Check which thresholds have been reached
+            thresholds.forEach(threshold => {
+                if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {
+                    reachedDepthsRef.current.add(threshold);
+                    onDepthReached?.(threshold);
+                }
+            });
+        }
+
+        const element = ref.current;
+        element.addEventListener('scroll', handleScroll);
+
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+        };
+    }, [ref.current, thresholds, onDepthReached]);
+}
+

package/src/uxsdk/useUXUnreachableElementTracker.ts

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useCallback } from "react"
+
+/**
+ * TODO: not ideal solution cuz sometimes has a bug but currently its enough
+ * 
+ * This hook is used to track the hover and click events of an unreachable element.
+ */
+export function useUXUnreachableElementTracker(
+    element: React.RefObject<HTMLElement | null>,
+    hoverCb: () => void,
+    clickCb: () => void
+) {
+    const hover = useRef(false)
+    const click = useRef(false)
+    const mouseLeaveTimeout = useRef<number | null>(null)
+
+    const lastHoverTime = useRef(0)
+    const DEBOUNCE_DELAY = 1000 // 1 second debounce
+    const MOUSE_LEAVE_DELAY = 50 // 50ms delay to allow visibilitychange to fire first
+
+    const handleMouseEnter = useCallback(() => {
+        const now = Date.now()
+        if (now - lastHoverTime.current > DEBOUNCE_DELAY) {
+            hover.current = true
+            lastHoverTime.current = now
+            hoverCb()
+        }
+    }, [hoverCb])
+
+    const handleMouseLeave = useCallback(() => {
+        // console.log("mouse leave")
+        // Clear any existing timeout
+        if (mouseLeaveTimeout.current) {
+            clearTimeout(mouseLeaveTimeout.current)
+        }
+        
+        // Delay setting hover to false to allow visibilitychange to fire first
+        mouseLeaveTimeout.current = setTimeout(() => {
+            hover.current = false
+            mouseLeaveTimeout.current = null
+        }, MOUSE_LEAVE_DELAY)
+    }, [])
+
+    useEffect(() => {
+        if (!element.current) {
+            return
+        }
+
+        element.current.addEventListener("mouseenter", handleMouseEnter)
+        element.current.addEventListener("mouseleave", handleMouseLeave)
+
+        return () => {
+            if (element.current) {
+                element.current.removeEventListener("mouseenter", handleMouseEnter)
+                element.current.removeEventListener("mouseleave", handleMouseLeave)
+            }
+            // Clean up timeout on unmount
+            if (mouseLeaveTimeout.current) {
+                clearTimeout(mouseLeaveTimeout.current)
+            }
+        }
+
+    }, [element.current, handleMouseEnter, handleMouseLeave])
+
+    // detect visibility loss (e.g. new tab opened)
+    const handleVisibilityChange = useCallback(() => {
+        // Clear the mouseleave timeout since visibility change indicates a click
+        if (mouseLeaveTimeout.current) {
+            clearTimeout(mouseLeaveTimeout.current)
+            mouseLeaveTimeout.current = null
+        }
+        
+        click.current = false
+        // console.log(hover, 7777)
+        if (hover.current) {
+            hover.current = false
+            click.current = true
+            clickCb()
+        }
+    }, [clickCb])
+
+    useEffect(() => {
+        // function handleBeforeUnload() {
+        //     console.log(hover.current)
+        //     console.log(111)
+        // }
+
+        // window.addEventListener('beforeunload', handleBeforeUnload);
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+
+        return () => {
+            // window.removeEventListener('beforeunload', handleBeforeUnload)
+            document.removeEventListener('visibilitychange', handleVisibilityChange)
+            // Clean up timeout on unmount
+            if (mouseLeaveTimeout.current) {
+                clearTimeout(mouseLeaveTimeout.current)
+            }
+        }
+    }, [handleVisibilityChange]) // Add handleVisibilityChange back to dependencies since it's now memoized
+}

package/src/views/HomeView/HomeView.styles.tsx

@@ -0,0 +1,37 @@
+import {css} from "@linaria/core";
+
+export const HomeViewHost = css`
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+`;
+
+export const HomeViewBodyHost = css`
+    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);
+    backdrop-filter: sepia(10%);
+    background-size: 30px 30px;
+    padding: 60px;
+    flex: 1;
+`;
+
+export const HomeViewBodyHostSecondary = css`
+    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);
+`;
+
+export const HomeViewBodyContent = css`
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+
+    @media (max-width: 1200px) {
+        width: 100%;
+        padding: 0 20px;
+    }
+
+    @media (max-width: 768px) {
+        width: 100%;
+        padding: 0 10px;
+    }
+`; 

package/src/views/HomeView/HomeView.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import * as cn from "./HomeView.styles";
+
+export interface HomeViewProps {
+    header: React.ReactNode
+    body: React.ReactNode
+    footer: React.ReactNode
+}
+
+export function HomeView({header, body, footer}: HomeViewProps) {
+    return <div className={cn.HomeViewHost}>
+        {header}
+        {body}
+        {footer}
+    </div>
+}
+
+export interface HomeViewBodyProps {
+    children: React.ReactNode
+    kind?: "secondary"
+}
+
+HomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {
+    return <div className={`
+        ${cn.HomeViewBodyHost}
+        ${kind === "secondary" ? cn.HomeViewBodyHostSecondary : ""}
+    `}>
+        <div className={cn.HomeViewBodyContent}>
+            {children}
+        </div>
+    </div>
+}
+
+

package/src/views/HomeView/index.ts

@@ -0,0 +1,3 @@
+export type {HomeViewProps, HomeViewBodyProps} from "./HomeView";
+
+export {HomeView} from "./HomeView";

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

@@ -0,0 +1,26 @@
+import {css} from "@linaria/core";
+
+export const AnchorHost = css`
+    @layer defaults {
+        &:has(code) {
+            --xyd-anchor-color: var(--color-text);
+            --xyd-anchor-color--hover: var(--color-text);
+
+            code {
+                text-decoration: underline;
+            }
+
+            &:hover {
+                code {
+                    text-decoration-thickness: 2px;
+                }
+            }
+        }
+
+        color: var(--xyd-anchor-color);
+
+        &:hover {
+            color: var(--xyd-anchor-color--hover);
+        }
+    }
+`; 

package/src/writer/Anchor/Anchor.tsx

@@ -0,0 +1,51 @@
+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
+}
+
+export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
+    { href = '', children, newWindow, as, ...props },
+    // ref is used in <NavbarMenu />
+    forwardedRef
+): ReactElement {
+    const Link = as || $Anchor
+
+    if (newWindow) {
+        return (
+            <Link
+                ref={forwardedRef}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className={cn.AnchorHost}
+                {...props}
+            >
+                {children}
+            </Link>
+        )
+    }
+
+    return (
+        <Link
+            ref={forwardedRef}
+            className={cn.AnchorHost}
+            href={href || undefined}
+            {...props}
+        >
+            {children}
+        </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";

package/src/writer/Badge/Badge.styles.tsx

@@ -0,0 +1,44 @@
+import {css} from "@linaria/core";
+
+export const BadgeHost = css`
+    @layer defaults {
+        display: inline-flex;
+        align-items: center;
+        
+        /* Size variants */
+        &[data-size="xs"] {
+            height: 15px;
+            padding: 6px;
+            gap: 3px;
+            border-radius: 6px;
+            font-size: var(--xyd-font-size-xsmall);
+        }
+
+        &[data-size="sm"] {
+            height: 18px;
+            padding: 10px;
+            gap: 3px;
+            border-radius: 6px;
+            font-size: var(--xyd-font-size-xsmall);
+        }
+        
+        /* Kind variants */
+        &[data-kind="default"] {
+            color: var(--xyd-badge-color--default);
+            background-color: var(--xyd-badge-bgcolor--default);
+        }
+        &[data-kind="warning"] {
+            color: var(--xyd-badge-color--warning);
+            background-color: var(--xyd-badge-bgcolor--warning);
+        }
+        &[data-kind="info"] {
+            color: var(--xyd-badge-color--info);
+            background-color: var(--xyd-badge-bgcolor--info);
+        }
+
+        [part="child"] {
+            position: relative;
+        }
+    }
+`;
+