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

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

@@ -1,89 +1,121 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
-export const $sample = {
-    host: css`
+export const CodeTabsHost = css`
+    display: block;
+`
+
+export const CodeTabsRoot = css`
+    @layer defaults {
         overflow: hidden;
         min-width: 0;
-        //flex: 1 1 0;
-        //max-width: 512px;
 
-        border: 1px solid rgb(236, 236, 241);
+        border: 1px solid var(--xyd-codetabs-border-color);
         border-radius: 16px;
-    `,
-}
 
-export const $languages = {
-    host: css`
+        &[data-single="true"] [part="pre"] {
+            border: none;
+        }
+
+        &[data-nodescription="true"] {
+            xyd-codetabs-languages [part="languages-list"] {
+                justify-content: flex-start;
+            }
+        }
+    }
+`;
+
+export const CodeTabsLanguagesHost = css`
+    @layer defaults {
         display: flex;
         flex: 1 1 0%;
-        //padding: 8px 0px;
 
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+        background: var(--xyd-codetabs-bgcolor);
         
         border-top-right-radius: 10px;
         border-top-left-radius: 10px;
         border-bottom: 0px;
 
         min-width: 0;
-    `,
-    list: css`
-        display: flex;
-        flex-grow: 1;
-        justify-content: end;
-        gap: 8px;
-        padding: 0 10px;
-    `,
-    button: css`
-        all: unset;
 
-        cursor: pointer;
+        font-weight: var(--xyd-font-weight-semibold);
+        font-size: var(--xyd-font-size-xsmall);
 
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        &[data-single="true"] {
+            height: 0;
+        }
 
-        border-radius: 6px;
-        padding: 6px;
+        [part="description"] {
+            display: flex;
+            align-items: center;
+            gap: 4px;
 
-        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;
+            color: var(--xyd-codetabs-color);
+            
+            margin-left: 4px;
+            margin-right: 4px;
         }
-        
-        &:hover {
-            transition: ease-in 0.1s;
-            background: #e3e3eb;
+
+        [part="description-item"] {
+            display: flex;
+            padding-left: 16px;
+            padding-right: 16px;
+            flex: 1 1 0%;
+            gap: 16px;
+            border-radius: 4px;
         }
-    `,
-    description: css`
-        display: flex;
-        align-items: center;
-        gap: 4px;
 
-        font-size: 14px;
-        color: rgb(53, 55, 64);
-        
-        margin-left: 4px;
-        margin-right: 4px;
-    `,
-    description$item: css`
-        display: flex;
-        padding-left: 16px;
-        padding-right: 16px;
-        flex: 1 1 0%;
-        gap: 16px;
-        border-radius: 4px;
-    `,
-    copy: css`
-        display: flex;
-        padding-left: 8px;
-        padding-right: 8px;
-        align-items: center;
-    `
-}
+        [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;
+        }
+    }
+`;
+
+
 

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"
@@ -7,39 +7,57 @@ import {
 import {
     CodeCopy,
 } from "../CodeCopy";
-import {
-    $sample,
-    $languages,
-} from "./CodeTabs.styles.tsx"; // TODO: style by highlighted?
+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 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={$sample.host}
-                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}
-                        />
-                    </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>
         )
     }
 }
@@ -50,33 +68,46 @@ interface LanguageTabSwitcherProps {
 }
 
 function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
-    return <div className={$languages.host}>
-        <$Description description={props.description}/>
+    const isSingle = props?.highlighted?.length === 1 && !props.description
+
+    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}
+    `}>
+
+        {
+            props.description && <div part="description">
+                <div part="description-item">
+                    {props.description}
+                </div>
+            </div>
+        }
 
-        <TabsPrimitive.List className={$languages.list}>
-            {props.highlighted?.map(({meta}, i) => (
-                <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
-                    {meta}
+        <TabsPrimitive.List part="languages-list">
+            {highlighted?.map(({ meta, lang }, i) => {
+                if (isSingle) {
+                    return null
+                }
+                return <TabsPrimitive.Trigger
+                    part="language-trigger"
+                    value={meta || lang}
+                    key={i}
+                >
+                    {meta || lang}
                 </TabsPrimitive.Trigger>
-            ))}
+            })}
         </TabsPrimitive.List>
 
-        <div className={$languages.copy}>
-            {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>
-}
-
-function $Description(props: { description: string }) {
-    return <div className={$languages.description}>
-        <div className={$languages.description$item}>
-            {props.description}
-        </div>
-    </div>
+    </xyd-codetabs-languages>
 }
-
-

package/src/coder/CodeTheme/CodeTheme.tsx

@@ -1,78 +1,119 @@
-import React, { createContext, useState, use, useEffect } from "react";
+import React, { createContext, useState, use, useEffect, Suspense } from "react";
 import { Theme } from "@code-hike/lighter";
 import { highlight } from "codehike/code";
 import type { HighlightedCode } from "codehike/code";
 
 import defaultTheme from "../themes/cosmo-light"
+import { Loader } from "../../kit";
 
 export interface CodeThemeProps {
-  codeblocks: CodeThemeBlockProps[];
-  children: React.ReactNode;
-  theme?: Theme;
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode;
 }
 
 export interface CodeThemeBlockProps {
-  /** This is the raw code. May include annotation comments. */
-  value: string;
-  /** The programming language. */
-  lang: string;
-  /** Metadata string (the content after the language name in a markdown codeblock). */
-  meta: string;
+    /** This is the raw code. May include annotation comments. */
+    value: string;
+    /** The programming language. */
+    lang: string;
+    /** Metadata string (the content after the language name in a markdown codeblock). */
+    meta: string;
+
+    /** The highlighted code. */
+    highlighted?: HighlightedCode
 }
 
 const CodeThemeProvider = createContext<{
-  highlighted: HighlightedCode[];
+    highlighted: HighlightedCode[];
 }>({
-  highlighted: [],
+    highlighted: [],
 });
 
 export function useCodeTheme() {
-  return use(CodeThemeProvider);
+    return use(CodeThemeProvider);
 }
 
+// TODO: lazy-loading - some codeblocks on server and another on client
+// TODO: lazdy client loading only on specific codeblock
 export function CodeTheme(props: CodeThemeProps) {
-  const highlighted = use(
-    fetchHighlight(props.codeblocks, props.theme || defaultTheme)
-  );
-
-  return (
-    <CodeThemeProvider
-      value={{
-        highlighted,
-      }}
-    >
-      {props.children}
-    </CodeThemeProvider>
-  );
-}
+    // Initialize with server-side highlighted codeblocks
+    const [highlighted, setHighlighted] = useState<HighlightedCode[] | undefined>(initializeHighlighted(props.codeblocks));
+    const [clientSideFetch, setClientSideFetch] = useState(true)
 
-// `CodeThemeSync` ?
-export function CodeThemeCSR(props: CodeThemeProps) {
-  const [highlighted, setHighlighted] = useState<HighlightedCode[]>([]);
+    useEffect(() => {
+        setHighlighted(initializeHighlighted(props.codeblocks))
+    }, [props.codeblocks])
 
-  useEffect(() => {
-    fetchHighlight(props.codeblocks, props.theme || defaultTheme).then(
-      setHighlighted
-    );
-  }, [props.codeblocks, props.theme]);
+    useEffect(() => {
+        if (!props.codeblocks) {
+            return;
+        }
+
+        // Check if we need to highlight any codeblocks
+        const needsHighlighting = props.codeblocks.some(
+            codeblock => !codeblock.highlighted || !codeblock.highlighted.tokens
+        );
+
+        if (needsHighlighting) {
+            clientSideHighlight();
+        }
+    }, [props.codeblocks]);
+
+    function initializeHighlighted(codeblocks: any) {
+        if (!codeblocks) return [];
 
-  if (!highlighted) {
-    return <div>loading${`...`}</div>;
-  }
+        return codeblocks.map(codeblock => {
+            if (codeblock.highlighted && codeblock.highlighted.tokens) {
+                return {
+                    ...codeblock.highlighted,
+                    meta: codeblock.highlighted?.meta || codeblock.meta,
+                };
+            }
 
-  return (
-    <CodeThemeProvider
-      value={{
-        highlighted,
-      }}
+            return null
+        }).filter(Boolean) as HighlightedCode[]
+    }
+
+    async function clientSideHighlight() {
+        if (!props.codeblocks) {
+            return;
+        }
+
+        const allHighlighted = props.codeblocks.every(codeblock => codeblock.highlighted)
+        if (allHighlighted) {
+            return;
+        }
+        
+        const newHighlighted = await fetchHighlight(props.codeblocks, props.theme || defaultTheme);
+        setHighlighted(newHighlighted)
+
+        setClientSideFetch(false)
+    }
+
+    const withTheme = <CodeThemeProvider
+        value={{
+            highlighted: highlighted || [],
+        }}
     >
-      {props.children}
+        {props.children}
     </CodeThemeProvider>
-  );
+
+    const allHighlighted = props.codeblocks?.every(codeblock => codeblock.highlighted)
+    if (allHighlighted) {
+        return withTheme
+    }
+
+    if (clientSideFetch) {
+        return <Loader />
+    }
+
+    return withTheme
 }
 
+// TODO: own server with grammars (codehike)
 async function fetchHighlight(codeblocks: CodeThemeBlockProps[], theme: Theme) {
-  return await Promise.all(
-    codeblocks?.map((codeblock) => highlight(codeblock, theme))
-  );
+    return await Promise.all(
+        codeblocks?.map((codeblock) => highlight(codeblock, theme))
+    );
 }

package/src/coder/CodeTheme/index.ts

@@ -2,7 +2,6 @@ export type {CodeThemeProps, CodeThemeBlockProps} from "./CodeTheme";
 
 export {
     CodeTheme,
-    CodeThemeCSR,
 
     useCodeTheme
 } from "./CodeTheme";

package/src/coder/CoderProvider.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { createContext, useContext } from "react";
+
+const CoderContext = createContext<{
+    lines?: boolean
+    scroll?: boolean
+}>({
+    lines: undefined,
+    scroll: undefined,
+})
+
+
+interface CoderProviderProps {
+    children: React.ReactNode
+
+    lines?: boolean
+
+    scroll?: boolean
+}
+export function CoderProvider({ children, lines, scroll }: CoderProviderProps) {
+    return <CoderContext.Provider value={{ lines, scroll }}>{children}</CoderContext.Provider>
+}
+
+export function useCoder() {
+    return useContext(CoderContext)
+}