@xyd-js/components 0.1.0-xyd.6 → 0.1.0-xyd.64

package/src/writer/UnderlineNav/UnderlineNav.styles.tsx

@@ -1,45 +1,181 @@
-import {css} from "@linaria/core"
-
-export const $nav = {
-    host: css`
-        align-items: center;
-        display: flex;
-
-        height: 42px;
-
-        background-color: #fff;
-        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));
-
-        z-index: 99;
-    `,
-    ul: css`
-        display: flex;
-        gap: 10px;
-
-        height: 100%;
-        color: hsl(212, 15%, calc(96% - 12% * 4));
-
-        list-style: none;
-        padding: 0;
-        white-space: nowrap;
-    `,
-    item: css`
-        height: 100%;
-
-        &[data-state="active"] { // TODO: in the future it should not be possible
-            a {
-                border-bottom-color: rgb(112, 81, 212);
-            }
-        }
-    `,
-    itemLink: css`
-        display: inline-flex;
-        border-bottom: 3px solid transparent;
-        text-decoration: none;
-
-        height: 100%;
-        padding: 10px;
-    `,
-    itemLink$$active: css`
-    `
-}
+import { css } from "@linaria/core"
+
+export const UnderlineNavHost = css`
+    @layer defaults {
+        [part="nav"] {
+            align-items: center;
+            display: flex;
+            height: 42px;
+            background-color: var(--xyd-underlinenav-bgcolor);
+            border-bottom: 1px solid var(--xyd-underlinenav-border-color);
+            z-index: 99;
+
+            &[data-kind="secondary"] {
+                border-bottom: none;
+                border-radius: 8px;
+                padding: 4px;
+                background-color: var(--xyd-tabs-bgcolor);
+            }
+        }
+
+        [part="list"] {
+            display: flex;
+            gap: 10px;
+            height: 100%;
+            color: var(--xyd-underlinenav-list-color);
+            list-style: none;
+            padding: 0;
+            white-space: nowrap;
+
+            [data-kind="secondary"] & {
+                gap: 4px;
+            }
+        }
+
+        [part="item"] {
+            height: 100%;
+            position: relative;
+
+            a, button {
+                height: 100%;
+            }
+            
+            &[data-state="active"] {
+                a {
+                    border-bottom-color: var(--xyd-underlinenav-color--active);
+                }
+
+                [data-kind="secondary"] & a {
+                    border-bottom-color: transparent;
+                    color: var(--xyd-tabs-color--active);
+                    background-color: var(--xyd-tabs-bgcolor--active);
+                    box-shadow: 0 1px 2px 0 var(--xyd-tabs-shadow-color--active);
+                }
+            }
+            &[data-state="inactive"] {
+                a, button {
+                    color: unset;
+                }
+            }
+        }
+
+        [part="link"] {
+            display: inline-flex;
+            border-bottom: 3px solid transparent;
+            text-decoration: none;
+            height: 100%;
+            padding: 10px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+
+            &:hover {
+                color: var(--xyd-underlinenav-color--active);
+            }
+
+            [data-kind="secondary"] & {
+                border-bottom: none;
+                padding: 5px 16px;
+                border-radius: 0.375rem;
+                color: var(--xyd-tabs-color);
+
+                &:hover {
+                    color: var(--xyd-tabs-color--active);
+                }
+            }
+        }
+
+        [part="content"] {
+            position: relative;
+            overflow: hidden;
+
+            [data-kind="secondary"] & {
+                margin-top: 16px;
+            }
+        }
+    }
+`;
+
+export const UnderlineNavContent = css`
+    @layer defaults {
+        position: relative;
+        width: 100%;
+
+        &[data-state="inactive"] {
+            display: none;
+        }
+
+        /* Only apply animations when parent has data-slide="true" */
+        [data-slide="true"] & {
+            /* Forward direction (left to right) */
+            &[data-direction="forward"][data-state="active"] {
+                position: relative;
+                animation: fadeInFromRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            &[data-direction="forward"][data-state="inactive"] {
+                position: absolute;
+                animation: fadeOutToLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            /* Backward direction (right to left) */
+            &[data-direction="backward"][data-state="active"] {
+                position: relative;
+                animation: fadeInFromLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            &[data-direction="backward"][data-state="inactive"] {
+                position: absolute;
+                animation: fadeOutToRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+        }
+
+        @keyframes fadeInFromRight {
+            from {
+                opacity: 0;
+                transform: translateX(75px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes fadeOutToLeft {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: 0;
+                transform: translateX(-75px);
+            }
+        }
+
+        @keyframes fadeInFromLeft {
+            from {
+                opacity: 0;
+                transform: translateX(-75px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes fadeOutToRight {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: 0;
+                transform: translateX(75px);
+            }
+        }
+
+        [part="child"] {
+            padding: 20px;
+            transition: all 0.3s ease;
+        }
+    }
+`;

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"