@xyd-js/components 0.1.0-xyd.8 → 0.1.0-xyd.94

package/src/coder/CodeCopy/CodeCopy.styles.tsx

@@ -1,19 +1,21 @@
 import {css} from "@linaria/core";
 
 export const CodeCopyHost = css`
-    all: unset;
+    @layer defaults {
+        all: unset;
     
-    cursor: pointer;
+        cursor: pointer;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    border-radius: 6px;
-    padding: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        border-radius: 6px;
+        padding: 6px;
 
-    &:hover {
-        transition: ease-in 0.1s;
-        background: #e3e3eb;
+        &:hover {
+            transition: ease-in 0.1s;
+            background: var(--xyd-code-copy-color);
+        }
     }
 `; 

package/src/coder/CodeCopy/CodeCopy.tsx

@@ -18,13 +18,15 @@ export function CodeCopy({text}: CodeCopyProps) {
         }, 1200)
     }
 
-    return (
+    return <xyd-code-copy>
         <button
+            part="button"
+            className={cn.CodeCopyHost}
             aria-label="Copy to clipboard"
             onClick={onClick}
-            className={cn.CodeCopyHost}
         >
             {copied ? <CheckCheck size={16}/> : <Copy size={16}/>}
         </button>
-    )
+    </xyd-code-copy>
+
 }

package/src/coder/CodeSample/CodeSample.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import {Theme} from "@code-hike/lighter";
+import { Theme } from "@code-hike/lighter";
 
-import type {CodeThemeBlockProps} from "../CodeTheme";
+import type { CodeThemeBlockProps } from "../CodeTheme";
 
 import {
     Code,
@@ -10,50 +10,106 @@ import {
 import {
     withCodeTabs
 } from "../CodeTabs";
-import {useCodeTheme} from "../CodeTheme";
+import { useCodeTheme } from "../CodeTheme";
+import { useCoder } from "../CoderProvider";
 
 export interface CodeSampleProps {
     name: string;
     description: string;
-    codeblocks: CodeThemeBlockProps[];
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme
     size?: "full"
+    lineNumbers?: boolean
+    descriptionHead?: string
+    descriptionContent?: string | React.ReactNode
+    descriptionIcon?: string
     kind?: "secondary"
-    theme?: Theme
+    controlByMeta?: boolean // TODO: BETTER IN THE FUTURE
 }
 
+const CodeContext = React.createContext<{
+    size?: "full"
+    lineNumbers?: boolean
+    descriptionHead?: string
+    descriptionContent?: string | React.ReactNode
+    descriptionIcon?: string
+}>({})
+
 export function CodeSample(props: CodeSampleProps) {
-    return <Code codeblocks={props.codeblocks} theme={props.theme}>
-        <$ThemedCodeSample {...props}/>
+    return <Code
+        codeblocks={props.codeblocks}
+        theme={props.theme}
+    >
+        <$ThemedCodeSample {...props} />
     </Code>
 }
 
 function $ThemedCodeSample(props: CodeSampleProps) {
-    const {highlighted} = useCodeTheme()
+    const { highlighted } = useCodeTheme()
+    const coder = useCoder()
 
     if (props.kind === "secondary") {
-        return <Code.Pre
-            codeblock={highlighted[0]}
-            handlers={[
-                annotations.mark,
-                annotations.bg,
-                annotations.lineNumbers
-            ]}
-        />
+        return <CodeContext value={{
+            size: props.size,
+            lineNumbers: props.lineNumbers,
+            descriptionHead: props.descriptionHead,
+            descriptionContent: props.descriptionContent,
+            descriptionIcon: props.descriptionIcon,
+        }}>
+            <Code.Pre
+                codeblock={highlighted[0]}
+                handlers={[
+                    annotations.mark,
+                    annotations.bg,
+                    annotations.lineNumbers
+                ]}
+            />
+        </CodeContext>
     }
 
-    return <$CodeSampleTabs
-        description={props.description}
-        highlighted={highlighted}
-        size={props.size}
-    />
+    let size: "full" | undefined = undefined
+    if (typeof props.size === "string") {
+        size = props.size
+    } else if (typeof coder.scroll === "boolean" && !coder.scroll) {
+        size = "full"
+    }
+
+    const lineNumbers = props.lineNumbers ?? coder.lines
+
+    return <CodeContext value={{
+        size,
+        lineNumbers,
+        descriptionHead: props.descriptionHead,
+        descriptionContent: props.descriptionContent,
+        descriptionIcon: props.descriptionIcon,
+    }}>
+        <$CodeSampleTabs
+            description={props.description}
+            highlighted={highlighted}
+            controlByMeta={props.controlByMeta}
+        />
+    </CodeContext>
 }
 
-const $CodeSampleTabs = withCodeTabs((props) => <Code.Pre
-    {...props}
-    handlers={[
+const $CodeSampleTabs = withCodeTabs((props) => {
+    const { lineNumbers, size, descriptionHead, descriptionContent, descriptionIcon } = React.useContext(CodeContext)
+    const handlers = [
         annotations.mark,
         annotations.bg,
-        annotations.lineNumbers
-    ]}
-/>)
+        annotations.diff
+    ]
+
+    if (lineNumbers) {
+        handlers.push(annotations.lineNumbers)
+    }
+
+    return <Code.Pre
+        {...props}
+        descriptionHead={descriptionHead}
+        descriptionContent={descriptionContent}
+        descriptionIcon={descriptionIcon}
+        size={size}
+        handlers={handlers}
+    />
+})
 

package/src/coder/CodeTabs/CodeTabs.styles.tsx

@@ -1,104 +1,121 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
 export const CodeTabsHost = css`
-    overflow: hidden;
-    min-width: 0;
-    //flex: 1 1 0;
-    //max-width: 512px;
-
-    border: 1px solid rgb(236, 236, 241);
-    border-radius: 16px;
-`;
-
-export const CodeTabsPreSingle = css`
-    border: none !important; // TODO: bad, find another way - CodeSample another kind?
+    display: block;
+`
+
+export const CodeTabsRoot = css`
+    @layer defaults {
+        overflow: hidden;
+        min-width: 0;
+
+        border: 1px solid var(--xyd-codetabs-border-color);
+        border-radius: 16px;
+
+        &[data-single="true"] [part="pre"] {
+            border: none;
+        }
+
+        &[data-nodescription="true"] {
+            xyd-codetabs-languages [part="languages-list"] {
+                justify-content: flex-start;
+            }
+        }
+    }
 `;
 
 export const CodeTabsLanguagesHost = css`
-    display: flex;
-    flex: 1 1 0%;
-    //padding: 8px 0px;
-
-    background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
-    
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    border-bottom: 0px;
-
-    min-width: 0;
-`;
-
-export const CodeTabsLanguagesHostSingle = css`
-    height: 0;
-`;
-
-export const CodeTabsLanguagesList = css`
-    display: flex;
-    flex-grow: 1;
-    justify-content: end;
-    gap: 8px;
-    padding: 0 10px;
-`;
-
-export const CodeTabsLanguagesButton = css`
-    all: unset;
-
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 6px;
-    padding: 6px;
-
-    font-size: 14px;
-    color: rgb(53, 55, 64);
-    
-    &[data-state="active"] {
-        color: rgb(112, 81, 212);
-        border-bottom: 1px solid rgb(112, 81, 212);
-        border-bottom-left-radius: 0px;
-        border-bottom-right-radius: 0px;
-    }
-    
-    &:hover {
-        transition: ease-in 0.1s;
-        background: #e3e3eb;
+    @layer defaults {
+        display: flex;
+        flex: 1 1 0%;
+
+        background: var(--xyd-codetabs-bgcolor);
+        
+        border-top-right-radius: 10px;
+        border-top-left-radius: 10px;
+        border-bottom: 0px;
+
+        min-width: 0;
+
+        font-weight: var(--xyd-font-weight-semibold);
+        font-size: var(--xyd-font-size-xsmall);
+
+        &[data-single="true"] {
+            height: 0;
+        }
+
+        [part="description"] {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            color: var(--xyd-codetabs-color);
+            
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+
+        [part="description-item"] {
+            display: flex;
+            padding-left: 16px;
+            padding-right: 16px;
+            flex: 1 1 0%;
+            gap: 16px;
+            border-radius: 4px;
+        }
+
+        [part="copy"] {
+            display: none;
+        }
+
+        [part="languages-list"] {
+            display: flex;
+            flex-grow: 1;
+            justify-content: end;
+            gap: 8px;
+            padding: 0 10px;
+        }
+
+        [part="language-trigger"] {
+            all: unset;
+
+            cursor: pointer;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            border-radius: 6px;
+            padding: 6px;
+
+            color: var(--xyd-codetabs-color);
+            
+            &[data-state="active"] {
+                color: var(--xyd-codetabs-color--active);
+                border-bottom: 1px solid var(--xyd-codetabs-color--active);
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
+            }
+            
+            &:hover {
+                transition: ease-in 0.1s;
+                background: var(--xyd-codetabs-color--hover);
+            }
+        }
+
+        [part="copy"] {
+            display: flex;
+            padding-left: 8px;
+            padding-right: 8px;
+            align-items: center;
+        }
+        &[data-single="true"] [part="copy"] {
+            top: 17px;
+            position: relative;
+            right: 5px;
+        }
     }
 `;
 
-export const CodeTabsLanguagesDescription = css`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    font-size: 14px;
-    color: rgb(53, 55, 64);
-    
-    margin-left: 4px;
-    margin-right: 4px;
-`;
-
-export const CodeTabsLanguagesDescriptionItem = css`
-    display: flex;
-    padding-left: 16px;
-    padding-right: 16px;
-    flex: 1 1 0%;
-    gap: 16px;
-    border-radius: 4px;
-`;
-
-export const CodeTabsLanguagesCopy = css`
-    display: flex;
-    padding-left: 8px;
-    padding-right: 8px;
-    align-items: center;
-`;
 
-export const CodeTabsLanguagesCopySingle = css`
-    top: 17px;
-    position: relative;
-    right: 5px;
-`;
 

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -1,5 +1,5 @@
-import React, {} from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import React, { useState, useEffect } from "react";
+import {Tabs as TabsPrimitive} from "radix-ui"; // TODO: remove and use separation
 import {
     HighlightedCode,
 } from "codehike/code"
@@ -12,36 +12,52 @@ import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
 export interface CodeTabsProps {
     description: string;
     highlighted: HighlightedCode[]
-    size?: "full"
+    className?: string
+    controlByMeta?: boolean // TODO: BETTER IN THE FUTURE
 }
 
 export function withCodeTabs(PreComponent) {
     return function CodeTabs(props: CodeTabsProps) {
-        const isSingle = props.highlighted.length === 1 && !props.description
+        const isSingle = props?.highlighted?.length === 1 && !props.description
+        const defaultValue = props.highlighted[0]?.meta || props.highlighted[0]?.lang
+        const [activeTab, setActiveTab] = useState(defaultValue)
+
+        // Reset active tab when highlighted prop changes
+        useEffect(() => {
+            setActiveTab(defaultValue)
+        }, [defaultValue])
+
+        if (props?.highlighted?.length === 0) { 
+            return null
+        }
+
 
         return (
-            <TabsPrimitive.Root
-                className={cn.CodeTabsHost}
-                style={props.highlighted[0]?.style}
-                defaultValue={props.highlighted[0]?.meta}
-            >
-                <$LanguageTabSwitcher
-                    description={props.description}
-                    highlighted={props.highlighted}
-                />
+            <xyd-codetabs className={`${cn.CodeTabsHost} ${props.className || ""}`}>
+                <TabsPrimitive.Root
+                    part="root"
+                    data-single={String(isSingle)}
+                    data-nodescription={!props.description ? "true" : undefined}
+                    className={`${cn.CodeTabsRoot}`}
+                    style={props.highlighted[0]?.style}
+                    value={activeTab}
+                    onValueChange={setActiveTab}
+                >
+                    <$LanguageTabSwitcher
+                        description={props.description}
+                        highlighted={props.highlighted}
+                    />
 
-                {props.highlighted?.map((codeblock, i) => (
-                    <TabsPrimitive.Content value={codeblock.meta} key={i}>
-                        <PreComponent
-                            style={codeblock?.style || codeblock?.style}
-                            codeblock={codeblock}
-                            className={`
-                                ${isSingle && cn.CodeTabsPreSingle}
-                            `}
-                        />
-                    </TabsPrimitive.Content>
-                ))}
-            </TabsPrimitive.Root>
+                    {props.highlighted?.map((codeblock, i) => (
+                        <TabsPrimitive.Content value={codeblock.meta || codeblock.lang} key={i}>
+                            <PreComponent
+                                style={codeblock?.style || codeblock?.style}
+                                codeblock={codeblock}
+                            />
+                        </TabsPrimitive.Content>
+                    ))}
+                </TabsPrimitive.Root>
+            </xyd-codetabs>
         )
     }
 }
@@ -52,44 +68,46 @@ interface LanguageTabSwitcherProps {
 }
 
 function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
-    const isSingle = props.highlighted.length === 1 && !props.description
+    const isSingle = props?.highlighted?.length === 1 && !props.description
 
-    return <div className={`
+    const highlighted = props.highlighted.filter((item, index, self) =>
+        index === self.findIndex((t) => (t.meta || t.lang) === (item.meta || item.lang))
+    );
+    return <xyd-codetabs-languages
+        data-single={String(isSingle)}
+        className={`
         ${cn.CodeTabsLanguagesHost}
-        ${isSingle && cn.CodeTabsLanguagesHostSingle}
     `}>
-        <$Description description={props.description}/>
 
-        <TabsPrimitive.List className={cn.CodeTabsLanguagesList}>
-            {props.highlighted?.map(({meta}, i) => {
+        {
+            props.description && <div part="description">
+                <div part="description-item">
+                    {props.description}
+                </div>
+            </div>
+        }
+
+        <TabsPrimitive.List part="languages-list">
+            {highlighted?.map(({ meta, lang }, i) => {
                 if (isSingle) {
                     return null
                 }
-                return <TabsPrimitive.Trigger value={meta!} key={i} className={cn.CodeTabsLanguagesButton}>
-                    {meta}
+                return <TabsPrimitive.Trigger
+                    part="language-trigger"
+                    value={meta || lang}
+                    key={i}
+                >
+                    {meta || lang}
                 </TabsPrimitive.Trigger>
             })}
         </TabsPrimitive.List>
 
-        <div className={`
-            ${cn.CodeTabsLanguagesCopy}
-            ${isSingle && cn.CodeTabsLanguagesCopySingle}
-        `}>
-            {props.highlighted?.map((codeblock, i) => (
-                <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
-                    <CodeCopy text={codeblock.value}/>
+        <div part="copy">
+            {highlighted?.map((codeblock, i) => (
+                <TabsPrimitive.Content value={codeblock.meta || codeblock.lang} asChild key={i}>
+                    <CodeCopy text={codeblock.value} />
                 </TabsPrimitive.Content>
             ))}
         </div>
-    </div>
+    </xyd-codetabs-languages>
 }
-
-function $Description(props: { description: string }) {
-    return <div className={cn.CodeTabsLanguagesDescription}>
-        <div className={cn.CodeTabsLanguagesDescriptionItem}>
-            {props.description}
-        </div>
-    </div>
-}
-
-