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

package/src/writer/UnderlineNav/UnderlineNav.tsx

@@ -1,38 +1,273 @@
-import React from "react"
-import * as RadixTabs from "@radix-ui/react-tabs";
+import React, { useState, useRef, useEffect, createContext, useContext } from "react"
+import {Tabs as RadixTabs} from "radix-ui"; // TODO: remove and use separation
 
-import {$nav} from "./UnderlineNav.styles"
+import * as cn from "./UnderlineNav.styles"
 
+/**
+ * Context for managing the navigation direction in the UnderlineNav component
+ */
+const UnderlineContext = createContext<{
+    direction: 'forward' | 'backward'
+}>({
+    direction: 'forward'
+});
+
+/**
+ * Props for the UnderlineNav component
+ */§
 export interface TabsProps {
+    /** Child elements to be rendered within the navigation */
     children: React.ReactNode
-    value: string
-    onChange: (value: string) => void
+
+    /** The currently selected tab value */
+    value?: string
+
+    /** Callback function triggered when a tab is selected */
+    onChange?: (value: string) => void
+
+    /** Whether to enable sliding animation between tabs */
+    slide?: boolean
+
+    /** Additional CSS class name for the component */
+    className?: string
+
+    /** The variant of the navigation */
+    kind?: 'default' | 'secondary'
 }
 
-export function UnderlineNav({children, value, onChange}: TabsProps) {
-    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>
-        <nav className={$nav.host}>
-            <RadixTabs.List asChild>
-                <ul className={$nav.ul}>
-                    {children}
-                </ul>
-            </RadixTabs.List>
-        </nav>
-    </RadixTabs.Root>
+/**
+ * A navigation component that displays tabs with an underline indicator
+ * 
+ * @category Component
+ */
+export function UnderlineNav({
+    children,
+    value: controlledValue,
+    onChange,
+    slide = true,
+    className,
+    kind = 'default'
+}: TabsProps) {
+    const childrenArray = React.Children.toArray(children);
+    const navItems = childrenArray.filter(
+        child => {
+            return React.isValidElement(child) &&
+                (child.type === UnderlineNav.Item || child.type.displayName === "UnderlineNav.Item")
+        }
+    );
+    const otherChildren = childrenArray.filter(
+        child => !React.isValidElement(child) ||
+            (child.type !== UnderlineNav.Item && child.type.displayName !== "UnderlineNav.Item")
+    );
+
+    const [direction, value, handleValueChange] = useValueChange(
+        controlledValue,
+        onChange,
+        navItems
+    );
+
+    return (
+        <UnderlineContext.Provider value={{ direction }}>
+            <RadixTabs.Root value={value} onValueChange={handleValueChange}>
+                <xyd-underlinenav 
+                    className={`${cn.UnderlineNavHost} ${className || ""}`}
+                    data-kind={kind}
+                >
+                    <nav part="nav">
+                        <RadixTabs.List asChild>
+                            <ul part="list">
+                                {navItems}
+                            </ul>
+                        </RadixTabs.List>
+                    </nav>
+                    <div
+                        part="content"
+                        data-slide={slide ? "true" : "false"}
+                    >
+                        {otherChildren}
+                    </div>
+                </xyd-underlinenav>
+            </RadixTabs.Root>
+        </UnderlineContext.Provider>
+    );
 }
 
+/**
+ * Props for the UnderlineNav.Item component
+ */
 export interface UnderlineNavItemProps {
+    /** Child elements to be rendered within the navigation item */
     children: React.ReactNode
+
+    /** Unique identifier for the navigation item */
     value: string
+
+    /** URL for the navigation item link */
     href?: string
+
+    /** Custom component to render as the link element */
+    as?: React.ElementType
+
+    /** Whether this item should be active by default */
+    defaultActive?: boolean
+}
+
+/**
+ * Individual navigation item component
+ * 
+ * @category Component
+ */
+UnderlineNav.Item = function UnderlineNavItem({ children, value, href, as, defaultActive }: UnderlineNavItemProps) {
+    const Link = as || $Link;
+    const controlByItem = typeof defaultActive === "boolean"
+    const [defaultActiveState, setDefaultActiveState] = useState(controlByItem ? (defaultActive ? "active" : "inactive") : undefined)
+
+    let activeProps = controlByItem && defaultActiveState != undefined
+        ? { "data-state": defaultActiveState }
+        : undefined
+
+    useEffect(() => {
+        if (!controlByItem) {
+            return
+        }
+
+        setDefaultActiveState(undefined)
+    }, [])
+
+    return (
+        <RadixTabs.Trigger value={value} asChild {...activeProps}>
+            <li part="item">
+                <Link part="link" href={href}>
+                    {children}
+                </Link>
+            </li>
+        </RadixTabs.Trigger>
+    );
+}
+
+/**
+ * Props for the UnderlineNav.Content component
+ */
+export interface UnderlineNavContentProps {
+    /** Child elements to be rendered within the content area */
+    children: React.ReactNode
+
+    /** Unique identifier for the content section */
+    value: string
+
+    /** Whether this content should be active by default */
+    defaultActive?: boolean
+}
+
+/**
+ * Content section component for the UnderlineNav
+ * 
+ * @category Component
+ */
+UnderlineNav.Content = function UnderlineNavContent({
+    children,
+    value,
+    defaultActive
+}: UnderlineNavContentProps) {
+    const { direction } = useContext(UnderlineContext);
+
+    const controlByItem = typeof defaultActive === "boolean"
+    const [defaultActiveState, setDefaultActiveState] = useState(controlByItem ? (defaultActive ? "active" : "inactive") : undefined)
+
+    let activeProps = controlByItem && defaultActiveState != undefined
+        ? { "data-state": defaultActiveState }
+        : undefined
+
+    useEffect(() => {
+        if (!controlByItem) {
+            return
+        }
+
+        setDefaultActiveState(undefined)
+    }, [])
+
+    return (
+        <RadixTabs.Content
+            value={value}
+            forceMount={true}
+            asChild
+            {...activeProps}
+        >
+            <xyd-underlinenav-content
+                className={cn.UnderlineNavContent}
+                data-direction={direction}
+            >
+                <div part="child">
+                    {children}
+                </div>
+            </xyd-underlinenav-content>
+        </RadixTabs.Content>
+    );
+}
+
+/**
+ * Custom hook to handle value changes and determine navigation direction
+ * @param controlledValue - The controlled value from props
+ * @param onChange - Callback function for value changes
+ * @param navItems - Array of navigation items
+ * @returns Tuple containing direction, current value, and change handler
+ */
+function useValueChange(
+    controlledValue: string | undefined,
+    onChange: ((value: string) => void) | undefined,
+    navItems: React.ReactNode[]
+) {
+    // Determine if we're in controlled or uncontrolled mode
+    const isControlled = controlledValue !== undefined && onChange !== undefined;
+
+    // For uncontrolled mode, use internal state
+    const [internalValue, setInternalValue] = useState(
+        navItems.length > 0 && React.isValidElement(navItems[0]) ?
+            navItems[0].props.value : ''
+    );
+
+    // Use either controlled or internal value
+    const value = isControlled ? controlledValue : internalValue;
+
+    // Track previous value to determine navigation direction
+    const prevValueRef = useRef(value);
+    const [direction, setDirection] = useState<'forward' | 'backward'>('forward');
+
+    // Handle value change and determine direction
+    const handleValueChange = (newValue: string) => {
+        // Find indices of current and new values
+        const currentIndex = navItems.findIndex(
+            item => React.isValidElement(item) && item.props.value === prevValueRef.current
+        );
+        const newIndex = navItems.findIndex(
+            item => React.isValidElement(item) && item.props.value === newValue
+        );
+
+        // Set direction based on indices
+        setDirection(newIndex > currentIndex ? 'forward' : 'backward');
+
+        // Update previous value
+        prevValueRef.current = newValue;
+
+        // Update internal state if uncontrolled
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+
+        // Call the original onChange if provided
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+
+    return [direction, value, handleValueChange] as const;
 }
 
-UnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {
-    return <RadixTabs.Trigger asChild value={value}>
-        <li className={$nav.item}>
-            <a href={href} className={`${$nav.itemLink}`}>
-                {children}
-            </a>
-        </li>
-    </RadixTabs.Trigger>
+/**
+ * Default link component used when no custom link component is provided
+ * @param props - The component props
+ * @returns A React component
+ */
+function $Link({ ...props }) {
+    return <a {...props}>{props.children}</a>
 }

package/src/writer/UnderlineNav/index.ts

@@ -1 +1,2 @@
-export {UnderlineNav} from "./UnderlineNav"
+export {UnderlineNav} from "./UnderlineNav"
+export {Tabs} from "./Tabs"

package/src/writer/UnderlineNav/useValueChange.ts

@@ -0,0 +1,60 @@
+import React, {useRef, useState} from "react";
+
+/**
+ * Custom hook to handle value changes and determine navigation direction
+ * @param controlledValue - The controlled value from props
+ * @param onChange - Callback function for value changes
+ * @param navItems - Array of navigation items
+ * @returns Tuple containing direction, current value, and change handler
+ */
+export function useValueChange(
+    controlledValue: string | undefined,
+    onChange: ((value: string) => void) | undefined,
+    navItems: React.ReactNode[]
+) {
+    // Determine if we're in controlled or uncontrolled mode
+    const isControlled = controlledValue !== undefined && onChange !== undefined;
+
+    // For uncontrolled mode, use internal state
+    const [internalValue, setInternalValue] = useState(
+        navItems.length > 0 && React.isValidElement(navItems[0]) ?
+            navItems[0].props.value : ''
+    );
+
+    // Use either controlled or internal value
+    const value = isControlled ? controlledValue : internalValue;
+
+    // Track previous value to determine navigation direction
+    const prevValueRef = useRef(value);
+    const [direction, setDirection] = useState<'forward' | 'backward'>('forward');
+
+    // Handle value change and determine direction
+    const handleValueChange = (newValue: string) => {
+        // Find indices of current and new values
+        const currentIndex = navItems.findIndex(
+            item => React.isValidElement(item) && item.props.value === prevValueRef.current
+        );
+        const newIndex = navItems.findIndex(
+            item => React.isValidElement(item) && item.props.value === newValue
+        );
+
+        // Set direction based on indices
+        setDirection(newIndex > currentIndex ? 'forward' : 'backward');
+
+        // Update previous value
+        prevValueRef.current = newValue;
+
+        // Update internal state if uncontrolled
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+
+        // Call the original onChange if provided
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+
+    return [direction, value, handleValueChange] as const;
+}
+

package/src/writer/Update/Update.styles.tsx

@@ -0,0 +1,33 @@
+import { css } from "@linaria/core"
+
+export const UpdateHost = css`
+    @layer defaults {
+        gap: 24px;
+        flex-direction: row;
+        padding-top: 32px;
+        padding-bottom: 32px;
+        align-items: flex-start;
+        width: 100%;
+        display: flex;
+        position: relative;
+
+        [part="meta"] {
+            width: 160px;
+            position: sticky;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            flex-shrink: 0;
+            display: flex;
+            gap: 10px;
+        }
+
+        [part="content-container"] {
+            padding-left: 2px;
+            padding-right: 2px;
+            overflow: hidden;
+            flex: 1 1 0%;
+            max-width: 100%;
+        }
+    }
+`;

package/src/writer/Update/Update.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Badge } from '../Badge';
+import { Text } from '../Text';
+
+import * as cn from "./Update.styles"
+
+interface UpdateProps {
+    children: React.ReactNode
+
+    version: string
+
+    date?: string
+}
+
+export function Update(props: UpdateProps) {
+    const { date, version, children } = props;
+    return (
+        <xyd-update className={cn.UpdateHost}>
+            <div part="meta">
+                {date && <div part="date">
+                    <Badge>
+                        {date}
+                    </Badge>
+                </div>}
+                <div part="version">
+                    <Text size="small">
+                        {version}
+                    </Text>
+                </div>
+            </div>
+            <div part="content-container">
+                <div part="content">{children}</div>
+            </div>
+        </xyd-update>
+    );
+}

package/src/writer/Update/index.ts

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

package/src/writer/VideoGuide/VideoGuide.module.css

@@ -0,0 +1,105 @@
+@layer defaults {
+    .VideoPlayerHost {
+        z-index: var(--xyd-videoguide-miniature-z-index);
+        width: var(--xyd-videoguide-miniature-mini-width);
+        height: var(--xyd-videoguide-miniature-mini-height);
+        overflow: visible;
+
+        [part="shape"] {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: visible;
+            box-shadow: var(--xyd-videoguide-miniature-shadow);
+            border-radius: var(--xyd-videoguide-miniature-radius);
+            box-sizing: border-box;
+            background-color: var(--xyd-videoguide-miniature-bgcolor);
+        }
+
+        [part="frame"] {
+            position: relative;
+            width: 100%;
+            height: var(--xyd-videoguide-miniature-mini-height);
+
+            background-color: var(--xyd-videoguide-miniature-bgcolor);
+            overflow: hidden;
+            border-radius: var(--xyd-videoguide-miniature-radius);
+            box-sizing: border-box;
+        }
+
+        [part="thumbnail"] {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url(https://xyd-land.netlify.app/docs-hero.png);
+            background-size: cover;
+            background-position: center;
+        }
+
+        [part="cover"] {
+            background-color: transparent;
+            backdrop-filter: brightness(60%) blur(10px);
+            -webkit-backdrop-filter: brightness(60%) blur(10px);
+
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transition: backdrop-filter .1s ease-in-out, -webkit-backdrop-filter .1s ease-in-out, opacity .1s ease-in-out, background-color .1s ease-in-out;
+
+            overflow: hidden;
+
+            border-radius: var(--xyd-videoguide-miniature-radius);
+            box-sizing: border-box;
+        }
+
+        [part="controls"] {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            box-sizing: border-box;
+        }
+
+        [part="button"] {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        [part="icon"] {
+            color: var(--xyd-videoguide-miniature-color);
+            display: flex;
+            box-sizing: border-box;
+
+            svg {
+                fill: currentColor;
+            }
+        }
+
+        [part="description"] {
+            box-sizing: border-box;
+            margin-top: 8px;
+        }
+
+        [part="description-container"] {
+            box-sizing: border-box;
+            margin-top: 8px;
+        }
+
+        [part="description"] {
+            text-align: center;
+            color: var(--xyd-videoguide-miniature-color);
+            display: block;
+            white-space: normal;
+        }
+    }
+}

package/src/writer/VideoGuide/VideoGuide.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import cn from "./VideoGuide.module.css";
+
+export function VideoGuide() {
+    return null
+};
+
+interface VideoGuideMiniatureProps {
+    videoSrc?: string;
+    description?: string;
+    className?: string;
+}
+
+VideoGuide.Miniature = function VideoGuideMiniature(props: VideoGuideMiniatureProps) {
+    const {
+        videoSrc,
+        description = "Watch the video guide"
+    } = props;
+
+    return <xyd-videoguide-miniature
+        className={`${cn.VideoPlayerHost} ${props.className || ""}`}
+    >
+        <div part="shape" >
+            <div part="frame" >
+                <iframe
+                    width="100%"
+                    height="100%"
+                    allow="autoplay; fullscreen"
+                    src={videoSrc}
+                />
+                <div part="thumbnail" />
+            </div>
+
+            <div part="cover">
+                <div part="controls">
+                    <button part="button" type="button">
+                        <div
+                            aria-hidden="true"
+                            part="icon"
+                        >
+                            <$PlayIcon />
+                        </div>
+
+                        <div part="description-container" >
+                            <span part="description" >
+                                {description}
+                            </span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </xyd-videoguide-miniature>
+};
+
+
+function $PlayIcon() {
+    return <svg
+        aria-hidden="true"
+        height={32}
+        width={32}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 14.25A6.25 6.25 0 0 0 14.25 8 6.242 6.242 0 0 0 8 1.75 6.25 6.25 0 0 0 1.75 8 6.25 6.25 0 0 0 8 14.25ZM8 16a8 8 0 0 0 8-8c0-4.419-3.57-8-8-8a8 8 0 0 0-8 8 8 8 0 0 0 8 8Z"
+        />
+        <path
+            d="M10.817 7.659A.415.415 0 0 1 11 8a.415.415 0 0 1-.183.341L7.242 10.91c-.305.218-.742.02-.742-.34V5.431c0-.36.437-.56.742-.341l3.575 2.568Z" />
+    </svg>
+}

package/src/writer/VideoGuide/index.ts

@@ -0,0 +1 @@
+export {VideoGuide} from './VideoGuide'; 

package/src/writer/index.ts

@@ -1,13 +1,23 @@
+export * from "./Anchor"
+
 export * from "./Badge"
 
+export * from "./Banner"
+
 export * from "./Blockquote"
 
 export * from "./Breadcrumbs"
 
+export * from "./Button"
+
 export * from "./Callout"
 
+export * from "./Card"
+
 export * from "./Code"
 
+export * from "./ColorSchemeButton"
+
 export * from "./Details"
 
 export * from "./GuideCard"
@@ -18,6 +28,10 @@ export * from "./Hr"
 
 export * from "./Icon"
 
+export * from "./Image"
+
+export * from "./List"
+
 export * from "./NavLinks"
 
 export * from "./Pre"
@@ -26,7 +40,15 @@ export * from "./Steps"
 
 export * from "./Table"
 
-export * from "./Tabs"
+// export * from "./Tabs"
+
+export * from "./Text"
+
+export * from "./TocCard"
 
 export * from "./UnderlineNav"
 
+export * from "./Update"
+
+export * from "./VideoGuide"
+