@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

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

@@ -1,74 +1,70 @@
 import {css} from "@linaria/core";
 
 export const TabsSampleHost = css`
-    position: relative;
-    max-width: 100%;
-`;
+    @layer defaults {
+        display: block;
+        position: relative;
+        max-width: 100%;
 
-export const TabsSampleButtons = css`
-    display: flex;
-    align-items: center;
-`;
+        [part="buttons"] {
+            display: flex;
+            align-items: center;
+        }
 
-export const TabsSampleContent = css`
-    margin-top: 16px;
-`;
+        [part="arrow"] {
+            padding: 8px;
+            background-color: var(--xyd-tabs-arrow-bgcolor);
+            box-shadow: 0 1px 2px 0 var(--xyd-tabs-shadow-color--active);
+        }
 
-export const TabsArrowHost = css`
-    padding: 8px;
-    background-color: #ffffff;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-`;
+        [part="arrow-icon"] {
+            width: 16px;
+            height: 16px;
+        }
 
-export const TabsArrowIcon = css`
-    width: 16px;
-    height: 16px;
-`;
+        [part="scroller"] {
+            overflow-x: auto;
+            flex-grow: 1;
+        }
 
-export const TabsScrollerHost = css`
-    overflow-x: auto;
-    flex-grow: 1;
-`;
+        [part="scroller-container"] {
+            display: inline-flex;
+            gap: 4px;
 
-export const TabsScrollerContainer = css`
-    display: inline-flex;
-    gap: 4px;
+            border-radius: 8px;
+            background-color: var(--xyd-tabs-bgcolor);
+            
+            padding: 4px;
+            margin-left: 4px;
+        }
 
-    border-radius: 8px;
-    background-color: #F3F4F6;
-    
-    padding: 4px;
-    margin-left: 4px;
-`;
+        [part="button"] {
+            padding: 5px 16px;
 
-export const TabsButtonHost = css`
-    padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            white-space: nowrap;
 
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    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;
 
-    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);
 
-    color: #6B7280;
+            &:hover {
+                color: var(--xyd-tabs-color--active);
+            }
 
-    &:hover {
-        color: #111827;
-    }
+            &[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);
+            }
+        }
 
-    &[data-state="active"] {
-        color: #111827;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        [part="content"] {
+            margin-top: 16px;
+        }
     }
 `;
 
-export const TabsButtonActive = css`
-    color: #111827;
-    background-color: #ffffff;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-`;
+

package/src/writer/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
-import React, {useState, useRef, useEffect} from 'react'
-import * as RadixTabs from "@radix-ui/react-tabs"
-import {ChevronLeft, ChevronRight} from "lucide-react"
+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 "./Tabs.styles";
 
@@ -8,9 +8,10 @@ export interface TabsProps {
     children: React.ReactNode;
     items: string[];
     tabIndex?: number;
+    className?: string;
 }
 
-export function Tabs({children, items, tabIndex}: TabsProps) {
+export function Tabs({ children, items, tabIndex, className }: TabsProps) {
     const [showLeftArrow, setShowLeftArrow] = useState(false)
     const [showRightArrow, setShowRightArrow] = useState(false)
     const scrollContainerRef = useRef<HTMLDivElement>(null)
@@ -19,7 +20,7 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
 
     const handleScroll = () => {
         if (scrollContainerRef.current) {
-            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current
             setShowLeftArrow(scrollLeft > 0)
             setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
         }
@@ -34,33 +35,37 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
     const scroll = (direction: 'left' | 'right') => {
         if (scrollContainerRef.current) {
             const scrollAmount = direction === 'left' ? -200 : 200
-            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})
+            scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' })
         }
     }
 
     return (
         <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>
-            <div className={cn.TabsSampleHost}>
-                <div className={cn.TabsSampleButtons}>
+            <xyd-tabs
+                className={`${cn.TabsSampleHost} ${className || ""}`}
+            >
+                <div part="buttons">
                     {showLeftArrow && (
                         <button
                             onClick={() => scroll('left')}
-                            className={cn.TabsArrowHost}
+                            part="arrow"
                         >
-                            <ChevronLeft className={cn.TabsArrowIcon}/>
+                            <ChevronLeft part="arrow-icon" />
                         </button>
                     )}
 
                     <div
                         ref={scrollContainerRef}
                         onScroll={handleScroll}
-                        className={cn.TabsScrollerHost}
+                        part="scroller"
                     >
-                        <div className={cn.TabsScrollerContainer}>
+                        <div
+                            part="scroller-container"
+                        >
                             <RadixTabs.List>
-                                {items.map((item, index) => <TabsItem key={index} value={item}>
-                                        {item}
-                                    </TabsItem>
+                                {items.map((item, index) => <$TabsItem key={index} value={item}>
+                                    {item}
+                                </$TabsItem>
                                 )}
                             </RadixTabs.List>
                         </div>
@@ -69,31 +74,33 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
                     {showRightArrow && (
                         <button
                             onClick={() => scroll('right')}
-                            className={cn.TabsArrowHost}
+                            part="arrow"
                         >
-                            <ChevronRight className={cn.TabsArrowIcon}/>
+                            <ChevronRight part="arrow-icon" />
                         </button>
                     )}
                 </div>
 
-                <div className={cn.TabsSampleContent}>
+                <div part="content">
                     {children}
                 </div>
-            </div>
+            </xyd-tabs>
         </RadixTabs.Root>
     )
 }
 
-function TabsItem({children, value}) {
+function $TabsItem({ children, value }) {
     return <RadixTabs.Trigger asChild value={value}>
-        <button className={`${cn.TabsButtonHost}`}>
+        <button part="button">
             {children}
         </button>
     </RadixTabs.Trigger>
 }
 
-Tabs.Content = function TabsContent({children, value}) {
+Tabs.Content = function TabsContent({ children, value }) {
     return <RadixTabs.Content asChild value={value}>
-        {children}
+        <div>
+            {children}
+        </div>
     </RadixTabs.Content>
 }

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} />
+}