@xyd-js/components 0.1.0-build.168

package/src/writer/Tabs/TabsPrimary.tsx

@@ -0,0 +1,215 @@
+import React, { useState, useRef, useEffect, createContext, useContext } from "react"
+import { Tabs as RadixTabs } from "radix-ui"; // TODO: remove and use separation
+
+import * as cn from "./TabsPrimary.styles"
+import { useValueChange } from "./useValueChange";
+import { useTabsAnalytics } from "./TabsAnalytics";
+
+/**
+ * Context for managing the navigation direction in the TabsPrimary component
+ */
+const TabsPrimaryContext = createContext<{
+    direction: 'forward' | 'backward'
+}>({
+    direction: 'forward'
+});
+
+/**
+ * Props for the TabsPrimary component
+ */
+export interface TabsPrimaryProps {
+    /** Child elements to be rendered within the navigation */
+    children: React.ReactNode
+
+    /** 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
+}
+
+/**
+ * A navigation component that displays tabs with an underline indicator
+ *
+ * @category Component
+ */
+export function TabsPrimary({
+    children,
+    value: controlledValue,
+    onChange,
+    slide = true,
+    className,
+}: TabsPrimaryProps) {
+    const tabsAnalytics = useTabsAnalytics()
+    const childrenArray = React.Children.toArray(children);
+    const navItems = childrenArray.filter(
+        child => {
+            return React.isValidElement(child) &&
+                (child.type === TabsPrimary.Item ||
+                    (typeof child.type === 'function' && 'displayName' in child.type && child.type.displayName === "Tabs.Item"))
+        }
+    );
+    const otherChildren = childrenArray.filter(
+        child => !React.isValidElement(child) ||
+            (child.type !== TabsPrimary.Item &&
+                !(typeof child.type === 'function' && 'displayName' in child.type && child.type.displayName === "Tabs.Item"))
+    );
+
+    const [direction, value, handleValueChange] = useValueChange(
+        controlledValue,
+        onChange,
+        navItems
+    );
+
+    useEffect(() => {
+        tabsAnalytics.setValue(value)
+    }, [value])
+
+    return (
+        <TabsPrimaryContext.Provider value={{ direction }}>
+            <RadixTabs.Root value={value} onValueChange={handleValueChange}>
+                <xyd-tabs
+                    ref={tabsAnalytics.tabsRef}
+                    className={`${cn.TabsPrimaryHost} ${className || ""}`}
+                >
+                    <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-tabs>
+            </RadixTabs.Root>
+        </TabsPrimaryContext.Provider>
+    );
+}
+
+/**
+ * Props for the TabsPrimary.Item component
+ */
+export interface TabsPrimaryItemProps {
+    /** 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
+ */
+TabsPrimary.Item = function TabsPrimaryItem({ children, value, href, as, defaultActive }: TabsPrimaryItemProps) {
+    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 TabsPrimary.Content component
+ */
+export interface TabsPrimaryContentProps {
+    /** 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 TabsPrimary
+ *
+ * @category Component
+ */
+TabsPrimary.Content = function TabsPrimaryContent({
+    children,
+    value,
+    defaultActive
+}: TabsPrimaryContentProps) {
+    const { direction } = useContext(TabsPrimaryContext);
+
+    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}
+        >
+            <div
+                className={cn.TabsPrimaryContent}
+                data-direction={direction}
+            >
+                <div part="child">
+                    {children}
+                </div>
+            </div>
+        </RadixTabs.Content>
+    );
+}
+
+function _Link({ ...props }) {
+    return <a {...props}>{props.children}</a>
+}

package/src/writer/Tabs/TabsProps.tsx

@@ -0,0 +1,13 @@
+export interface TabsProps {
+    /** The kind of tabs to render. If not provided, the component will render the primary tabs. */
+    kind?: 'secondary' | null
+}
+
+/**
+ * Props for the Tabs component
+ * 
+ * @category Component
+ */
+export function TabsProps(props: TabsProps) {
+    return props
+}

package/src/writer/Tabs/TabsSecondary.styles.tsx

@@ -0,0 +1,78 @@
+import { css } from "@linaria/core";
+
+export const TabsSecondaryHost = css`
+    @layer defaults {
+        display: block;
+        position: relative;
+        max-width: 100%;
+
+        [part="buttons"] {
+            display: flex;
+            align-items: center;
+        }
+
+        [part="arrow"] {
+            padding: 8px;
+            background-color: var(--xyd-tabs-arrow-bgcolor);
+            box-shadow: 0 1px 2px 0 var(--xyd-tabs-shadow-color--active);
+        }
+
+        [part="arrow-icon"] {
+            width: 16px;
+            height: 16px;
+        }
+
+        [part="scroller"] {
+            overflow-x: auto;
+            flex-grow: 1;
+        }
+
+        [part="scroller-container"] {
+            display: inline-flex;
+            gap: 4px;
+
+            border-radius: 8px;
+            background-color: var(--xyd-tabs-bgcolor);
+            
+            padding: 4px;
+            margin-left: 4px;
+        }
+
+        [part="content"] {
+            margin-top: 16px;
+        }
+    }
+`;
+
+export const TabsSecondaryItem = css`
+    @layer defaults {
+        cursor: pointer;
+        &[data-state="inactive"] {
+            a, button {
+                color: unset;
+            }
+        }
+
+        display: inline-block;
+        padding: 5px 16px;
+
+        border-radius: 0.375rem;
+        white-space: nowrap;
+
+        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 300ms;
+
+        color: var(--xyd-tabs-color);
+
+        &:hover {
+            color: var(--xyd-tabs-color--active);
+        }
+
+        &[data-state="active"] {
+            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);
+        }
+    }
+`

package/src/writer/Tabs/TabsSecondary.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Tabs as RadixTabs } from "radix-ui"; // TODO: remove and use separation
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+import * as cn from "./TabsSecondary.styles";
+import { useValueChange } from './useValueChange';
+import { useTabsAnalytics } from './TabsAnalytics';
+
+export interface TabsSecondaryProps {
+    /** The currently selected tab value */
+    value?: string
+    children: React.ReactNode;
+    className?: string;
+    onChange?: (value: string) => void
+}
+
+export function TabsSecondary({ children, value: controlledValue, onChange, className }: TabsSecondaryProps) {
+    const tabsAnalytics = useTabsAnalytics()
+    const [showLeftArrow, setShowLeftArrow] = useState(false)
+    const [showRightArrow, setShowRightArrow] = useState(false)
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+    const childrenArray = React.Children.toArray(children);
+    const navItems = childrenArray.filter(
+        child => {
+            return React.isValidElement(child) &&
+                (child.type === TabsSecondary.Item ||
+                    (typeof child.type === 'function' && 'displayName' in child.type && child.type.displayName === "Tabs.Item"))
+        }
+    );
+    const otherChildren = childrenArray.filter(
+        child => !React.isValidElement(child) ||
+            (child.type !== TabsSecondary.Item &&
+                !(typeof child.type === 'function' && 'displayName' in child.type && child.type.displayName === "Tabs.Item"))
+    );
+
+    const [_, value, handleValueChange] = useValueChange(
+        controlledValue,
+        onChange,
+        navItems,
+    );
+
+    useEffect(() => {
+        tabsAnalytics.setValue(value)
+    }, [value])
+
+    const handleScroll = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current
+            setShowLeftArrow(scrollLeft > 0)
+            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
+        }
+    }
+
+    useEffect(() => {
+        handleScroll()
+        window.addEventListener('resize', handleScroll)
+        return () => window.removeEventListener('resize', handleScroll)
+    }, [])
+
+    const scroll = (direction: 'left' | 'right') => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = direction === 'left' ? -200 : 200
+            scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' })
+        }
+    }
+
+    return (
+        <RadixTabs.Root asChild value={value} onValueChange={handleValueChange}>
+            <xyd-tabs
+                ref={tabsAnalytics.tabsRef}
+                data-kind="secondary"
+                className={`${cn.TabsSecondaryHost} ${className || ""}`}
+            >
+                <div part="buttons">
+                    {showLeftArrow && (
+                        <button
+                            onClick={() => scroll('left')}
+                            part="arrow"
+                        >
+                            <ChevronLeft part="arrow-icon" />
+                        </button>
+                    )}
+
+                    <div
+                        ref={scrollContainerRef}
+                        onScroll={handleScroll}
+                        part="scroller"
+                    >
+                        <div
+                            part="scroller-container"
+                        >
+                            <RadixTabs.List>
+                                {navItems}
+                            </RadixTabs.List>
+                        </div>
+                    </div>
+
+                    {showRightArrow && (
+                        <button
+                            onClick={() => scroll('right')}
+                            part="arrow"
+                        >
+                            <ChevronRight part="arrow-icon" />
+                        </button>
+                    )}
+                </div>
+                <div part="content">
+                    {otherChildren}
+                </div>
+            </xyd-tabs>
+        </RadixTabs.Root>
+    );
+}
+
+/**
+ * Props for the TabsPrimary.Item component
+ */
+export interface TabsSecondaryItemProps {
+    /** 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
+}
+
+TabsSecondary.Item = function TabsPrimaryItem({ children, value, href, as, defaultActive }: TabsSecondaryItemProps) {
+    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 className={cn.TabsSecondaryItem} value={value} asChild {...activeProps}>
+            <div>
+                <Link href={href}>
+                    {children}
+                </Link>
+            </div>
+        </RadixTabs.Trigger>
+    );
+}
+
+function _Link({ ...props }) {
+    return <a {...props}>{props.children}</a>
+}
+
+
+TabsSecondary.Content = function TabsContent({ children, value }) {
+    return <RadixTabs.Content asChild value={value}>
+        <div>
+            {children}
+        </div>
+    </RadixTabs.Content>
+}
+

package/src/writer/Tabs/index.ts

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

package/src/writer/Tabs/useValueChange.ts

@@ -0,0 +1,84 @@
+import React, {useRef, useState} from "react";
+
+import { useTabsAnalytics } from "./TabsAnalytics";
+
+import {EVENT_COMPONENT_TAB_CHANGE} from "../../uxsdk";
+
+/**
+ * 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[],
+) {
+    const tabsAnalytics = useTabsAnalytics()
+    const tabsRef = tabsAnalytics.tabsRef
+    
+    // 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
+        const newDirection = newIndex > currentIndex ? 'forward' : 'backward';
+        setDirection(newDirection);
+
+        // 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);
+        }
+
+        // Dispatch custom event if tabsRef is provided
+        console.log(tabsRef)
+        if (tabsRef?.current) {
+            const eventData = {
+                value: newValue,
+                previousValue: prevValueRef.current,
+                direction: newDirection as 'forward' | 'backward'
+            };
+            
+            const tabChangeEvent = new CustomEvent(EVENT_COMPONENT_TAB_CHANGE, {
+                detail: eventData,
+                bubbles: true
+            });
+            tabsRef.current.dispatchEvent(tabChangeEvent);
+        }
+    };
+
+    return [direction, value, handleValueChange] as const;
+}
+

package/src/writer/Text/Text.styles.tsx

@@ -0,0 +1,66 @@
+import { css } from "@linaria/core";
+
+export const TextHost = css`
+    @layer defaults {
+        display: inline-block;
+        margin: 0;
+
+        &[data-size="xsmall"] { 
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-xsmall);
+        }
+        &[data-size="small"] { 
+            font-size: var(--xyd-font-size-small);
+            line-height: var(--xyd-line-height-small);
+        }
+        &[data-size="medium"] { 
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+        }
+        &[data-size="large"] { 
+            font-size: var(--xyd-font-size-large);
+            line-height: var(--xyd-line-height-large);
+        }
+        &[data-size="xlarge"] { 
+            font-size: var(--xyd-font-size-xlarge);
+            line-height: var(--xyd-line-height-xlarge);
+        }
+        &[data-size="xxlarge"] { 
+            font-size: var(--xyd-font-size-xxlarge);
+            line-height: var(--xyd-line-height-xxlarge);
+        }
+
+        &[data-kind="default"] { 
+            color: var(--xyd-text-color--default);
+        }
+        &[data-kind="ghost"] { 
+            color: var(--xyd-text-color--ghost);
+        }
+        &[data-kind="success"] { 
+            color: var(--xyd-text-color--success);
+        }
+        &[data-kind="warn"] { 
+            color: var(--xyd-text-color--warn);
+        }
+        &[data-kind="error"] { 
+            color: var(--xyd-text-color--error);
+        }
+        &[data-kind="primary"] { 
+            color: var(--xyd-text-color--primary);
+        }
+        &[data-kind="secondary"] { 
+            color: var(--xyd-text-color--secondary);
+        }
+
+        &[data-weight="normal"] { 
+            font-weight: var(--xyd-font-weight-normal);
+        }
+        &[data-weight="bold"] { 
+            font-weight: bold;
+        }
+        &[data-weight="extra-bold"] { 
+            font-weight: var(--xyd-font-weight-extrabold);
+        }
+    }
+`;
+