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

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: var(--xyd-font-weight-medium);
+        }
+        &[data-weight="extra-bold"] { 
+            font-weight: var(--xyd-font-weight-semibold);
+        }
+    }
+`;
+

package/src/writer/Text/Text.tsx

@@ -0,0 +1,79 @@
+import React from "react"
+
+import * as cn from "./Text.styles";
+
+/**
+ * Available font sizes for the Text component
+ */
+export type TextFontSizes = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+
+/**
+ * Available text styles/kinds for the Text component
+ */
+export type TextKindTypes = "default" | "ghost" | "success" | "warn" | "error" | "primary" | "secondary";
+
+/**
+ * Available font weights for the Text component
+ */
+export type TextFontWeights = "normal" | "bold" | "extra-bold";
+
+/**
+ * Props for the Text component
+ */
+export interface TextProps {
+    /** Font size of the text */
+    size?: TextFontSizes
+
+    /** Visual style/kind of the text */
+    kind?: TextKindTypes
+
+    /** Font weight of the text */
+    weight?: TextFontWeights
+
+    /** Content to be rendered inside the text component */
+    children?: React.ReactNode
+
+    /** Additional CSS class name */
+    className?: string
+
+    /** HTML id attribute */
+    id?: string
+    
+    /** Click event handler */
+    onClick?: () => void
+    
+    /** HTML tag to render the text as */
+    as?: "span" | "p"
+}
+
+/**
+ * A flexible text component that supports different sizes, styles, and weights.
+ * 
+ * @category Component
+ */
+export function Text({
+    size = "medium",
+    kind = "default",
+    weight = "normal",
+    children,
+    className,
+    id,
+    onClick,
+    as = "p"
+}: TextProps) {
+    const Tag = as || "p";
+
+    return (
+        <Tag
+            className={`${cn.TextHost} ${className || ''}`}
+            data-size={size}
+            data-kind={kind}
+            data-weight={weight}
+            onClick={onClick}
+            id={id}
+        >
+            {children}
+        </Tag>
+    )
+}
+

package/src/writer/Text/index.ts

@@ -0,0 +1,3 @@
+export {
+    Text
+} from "./Text";

package/src/writer/TocCard/TocCard.module.css

@@ -0,0 +1,44 @@
+@layer defaults {
+    .TocCardHost {
+        display: block;
+        max-width: 250px;
+    
+        [part="container"] {
+        }
+    
+        [part="description"] {
+            color: var(--xyd-toccard-color);
+            letter-spacing: 0;
+        }
+    
+        [part="link"] {
+            display: block;
+            border: 1px solid var(--xyd-toccard-border-color);
+            border-radius: 6px;
+            padding: 8px 16px 12px;
+            text-decoration: none;
+    
+            &:hover {
+                border-color: var(--xyd-toccard-border-color--active);
+            }
+        }
+    
+        [part="title-container"] {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    
+        [part="title"] {
+            color: var(--xyd-toccard-title-color);
+            margin-bottom: 2px;
+        }
+    
+        [part="link-icon"] {
+            width: 1em;
+            height: 1em;
+            object-fit: contain;
+            color: var(--xyd-toccard-icon-color);
+        }
+    }
+}

package/src/writer/TocCard/TocCard.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import cn from "./TocCard.module.css";
+import { Icon } from "writer";
+
+interface TocCardProps {
+    title: string;
+    description: string;
+    href: string;
+    className?: string;
+    icon?: string;
+    as?: React.ElementType;
+}
+
+export function TocCard({ title, description, href, className, icon, as }: TocCardProps) {
+    const Link = as || $Link;
+
+    return <xyd-toccard
+        className={`${cn.TocCardHost} ${className || ""}`}
+    >
+        <div part="container">
+            <Link
+                part="link"
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+            >
+                <div part="title-container">
+                    <div part="title">{title}</div>
+                    {icon && <Icon name={icon} size={16} />}
+                </div>
+                <div part="description">
+                    {description}
+                </div>
+            </Link>
+        </div>
+    </xyd-toccard>
+}
+
+function $Link({ children, href, ...props }: React.ComponentProps<'a'>) {
+    return <a href={href} {...props}>{children}</a>
+}

package/src/writer/TocCard/index.ts

@@ -0,0 +1,3 @@
+export {
+    TocCard
+} from "./TocCard";

package/src/writer/UnderlineNav/Tabs.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from "react"
+
+import { TabsPrimary, TabsPrimaryProps } from "./TabsPrimary"
+import { TabsSecondary, TabsSecondaryProps } from "./TabsSecondary";
+
+interface TabsPropsCommon {
+    kind?: 'secondary' | null
+}
+// TODO: in the future unify the TabsPrimary and TabsSecondary components?
+type TabsProps<T> = T & TabsPropsCommon
+
+const TabsContext = createContext<TabsPropsCommon>({
+    kind: null
+})
+
+export function Tabs(props: TabsProps<TabsSecondaryProps | TabsPrimaryProps>) {
+    if (props.kind === 'secondary') {
+        return (
+            <TabsContext value={{ kind: 'secondary' }}>
+                <TabsSecondary {...props} />
+            </TabsContext>
+        )
+    }
+
+    return (
+        <TabsContext value={{}}>
+            <TabsPrimary {...props} />
+        </TabsContext>
+    )
+}
+
+
+Tabs.Item = function TabsItem(props: any) {
+    const { kind } = useContext(TabsContext)
+
+    if (kind === 'secondary') {
+        return <TabsSecondary.Item {...props} />
+    }
+
+    return <TabsPrimary.Item {...props} />
+}
+
+Tabs.Content = function TabsContent(props: any) {
+    const { kind } = useContext(TabsContext)
+
+    if (kind === 'secondary') {
+        return <TabsSecondary.Content {...props} />
+    }
+
+    return <TabsPrimary.Content {...props} />
+}

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

@@ -0,0 +1,184 @@
+import {css} from "@linaria/core"
+
+export const TabsPrimaryHost = 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 TabsPrimaryContent = 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/TabsPrimary.tsx

@@ -0,0 +1,209 @@
+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 { Tabs } from "./Tabs";
+
+/**
+ * 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 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 === "UnderlineNav.Item"))
+        }
+    );
+    const otherChildren = childrenArray.filter(
+        child => !React.isValidElement(child) ||
+            (child.type !== TabsPrimary.Item &&
+                !(typeof child.type === 'function' && 'displayName' in child.type && child.type.displayName === "UnderlineNav.Item"))
+    );
+
+    const [direction, value, handleValueChange] = useValueChange(
+        controlledValue,
+        onChange,
+        navItems
+    );
+
+    return (
+        <TabsPrimaryContext.Provider value={{direction}}>
+            <RadixTabs.Root value={value} onValueChange={handleValueChange}>
+                <xyd-tabs
+                    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>
+}