@xyd-js/components 0.1.0-build.168

package/src/coder/CodeSample/CodeSampleAnalytics.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { UXNode } from "openux-js";
+
+import { useTabsAnalytics } from "../../writer/Tabs/TabsAnalytics";
+import { EVENT_COMPONENT_TAB_CHANGE, useUXEvents, useUXScrollDepth } from "../../uxsdk";
+
+const CodeSampleAnalyticsContext = React.createContext<{
+    ref: React.RefObject<HTMLPreElement | null>
+
+    setActiveTab: (tab: string) => void
+
+    setActiveExample: (example: string) => void
+}>({
+    ref: {
+        current: null
+    },
+
+    setActiveTab: () => {
+    },
+
+    setActiveExample: () => {
+    }
+})
+
+export function useCodeSampleAnalytics() {
+    return React.useContext(CodeSampleAnalyticsContext)
+}
+
+export function CodeSampleAnalytics({ children }: { children: React.ReactNode }) {
+    const ref = useRef<HTMLPreElement>(null);
+    const [activeTab, setActiveTab] = useState("")
+    const [activeExample, setActiveExample] = useState("")
+
+    const tabs = useTabsAnalytics()
+
+    useEffect(() => {
+        setActiveExample(tabs.value)
+    }, [tabs.value])
+
+    return (
+        <CodeSampleAnalyticsContext value={{
+            ref,
+            setActiveTab,
+            setActiveExample
+        }}>
+            <UXNode
+                name="CodeSample"
+                props={{
+                    tab: activeTab,
+                    example: activeExample,
+                    code: ""
+                }}
+            >
+                <CodeSampleAnalyticsHooks>
+                    {children}
+                </CodeSampleAnalyticsHooks>
+            </UXNode>
+        </CodeSampleAnalyticsContext>
+    );
+}
+
+function CodeSampleAnalyticsHooks({ children }: { children: React.ReactNode }) {
+    useExampleTabChange()
+    useCodeSampleScroll()
+
+    return children
+}
+
+// TODO: better API
+function useExampleTabChange() {
+    const tabs = useTabsAnalytics()
+    const ux = useUXEvents();
+
+    useEffect(() => {
+        const tabsElement = tabs.tabsRef.current;
+        if (!tabsElement) {
+            return
+        }
+
+        function handleTabChange(event: CustomEvent) {
+            const { value } = event.detail;
+            ux.docs.code.example_change({
+                example: value,
+            })
+        };
+
+        tabsElement.addEventListener(EVENT_COMPONENT_TAB_CHANGE, handleTabChange as EventListener);
+
+        return () => {
+            tabsElement.removeEventListener(EVENT_COMPONENT_TAB_CHANGE, handleTabChange as EventListener);
+        };
+    }, [tabs.tabsRef.current]);
+}
+
+function useCodeSampleScroll() {
+    const codeSampleAnalytics = useCodeSampleAnalytics();
+    const ux = useUXEvents();
+    
+    useUXScrollDepth(codeSampleAnalytics.ref, {
+        onDepthReached: (depth) => {
+            if (depth === 100) {
+                ux.docs.code.scroll_100({});
+            }
+
+            ux.docs.code.scroll_depth({
+                depth: depth,
+            });
+        },
+    });
+}
+

package/src/coder/CodeSample/index.ts

@@ -0,0 +1,11 @@
+export {
+    CodeSample,
+} from './CodeSample';
+
+export {
+    withLocalStored,
+} from './withLocalStored';
+
+export type {
+    CodeSampleProps,
+} from "./CodeSample";

package/src/coder/CodeSample/withLocalStored.tsx

@@ -0,0 +1,50 @@
+import React, {useState, useEffect} from "react"
+
+export interface CodeTabsProps {
+    $localStorageKey: string
+    $defaultValue: string
+
+    children: React.ReactNode
+}
+
+// TODO: move to CodeTabs?
+export function withLocalStored(Component: any) {
+    return function LocalStored(props: CodeTabsProps) {
+        const [value, setValue] = useState(
+            typeof localStorage !== "undefined"
+                ? localStorage?.getItem(props.$localStorageKey) || props.$defaultValue
+                : props.$defaultValue,
+        )
+
+        useEffect(() => {
+            const handler = (e: StorageEvent) => {
+                if (e.key === props.$localStorageKey) {
+                    setValue(e.newValue || props.$defaultValue)
+                }
+            }
+            window.addEventListener("storage", handler)
+            return () => {
+                window.removeEventListener("storage", handler)
+            }
+        }, [props.$localStorageKey])
+
+        function onValueChange(value: string) {
+            localStorage.setItem(props.$localStorageKey, value)
+            window.dispatchEvent(
+                new StorageEvent("storage", {
+                    key: props.$localStorageKey,
+                    newValue: value,
+                }),
+            )
+        }
+
+        return (
+            <Component
+                onValueChange={onValueChange}
+                value={value}
+            >
+                {props.children}
+            </Component>
+        )
+    }
+}

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

@@ -0,0 +1,126 @@
+import { css } from "@linaria/core";
+
+export const CodeTabsHost = css`
+    display: grid;
+`
+
+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`
+    @layer defaults {
+        --codetabs-color: var(--user-codetabs-color, var(--xyd-codetabs-color));
+        --codetabs-color--active: var(--user-codetabs-color--active, var(--xyd-codetabs-color--active));
+        --codetabs-color--hover: var(--user-codetabs-color--hover, var(--xyd-codetabs-color--hover));
+
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        flex: 1 1 0%;
+
+        background: var(--user-codetabs-bgcolor, 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;
+            flex: 1;
+            align-items: center;
+            gap: 4px;
+
+            color: var(--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;
+            gap: 8px;
+            padding: 0 10px;
+            overflow: auto;
+        }
+
+        [part="language-trigger"] {
+            all: unset;
+
+            cursor: pointer;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            border-radius: 6px;
+            padding: 6px;
+
+            color: var(--codetabs-color);
+            
+            &[data-state="active"] {
+                color: var(--codetabs-color--active);
+                border-bottom: 1px solid var(--codetabs-color--active);
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
+            }
+            
+            &:hover {
+                transition: ease-in 0.1s;
+                background: var(--codetabs-color--hover);
+            }
+        }
+
+        [part="copy"] {
+            display: flex;
+            padding-left: 8px;
+            padding-right: 8px;
+            align-items: center;
+        }
+        &[data-single="true"] [part="copy"] {
+            position: absolute;
+            right: 0;
+        }
+    }
+`;
+
+
+

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from "react";
+import {Tabs as TabsPrimitive} from "radix-ui"; // TODO: remove and use separation
+import {
+    HighlightedCode,
+} from "codehike/code"
+
+import {
+    CodeCopy,
+} from "../CodeCopy";
+import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
+import { SyntaxHighlightedCode } from "../CodeTheme/CodeTheme";
+import { useCodeSampleAnalytics } from "../CodeSample/CodeSampleAnalytics";
+import { useUXEvents } from "../../uxsdk";
+
+export interface CodeTabsProps {
+    description: string;
+    highlighted: SyntaxHighlightedCode[]
+    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)
+
+        const codeSampleAnalytics = useCodeSampleAnalytics()
+        const ux = useUXEvents()
+
+        // Reset active tab when highlighted prop changes
+        useEffect(() => {
+            setActiveTab(defaultValue)
+        }, [defaultValue])
+
+        useEffect(() => {
+            codeSampleAnalytics.setActiveTab(activeTab)
+        }, [])
+
+        function changeTab(value: string) {
+            setActiveTab(value)
+            codeSampleAnalytics.setActiveTab(value)
+            ux.docs.code.tab_change({tab: value})
+        }
+
+        if (props?.highlighted?.length === 0) { 
+            return null
+        }
+
+        return (
+            <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={changeTab}
+                >
+                    <$LanguageTabSwitcher
+                        description={props.description}
+                        highlighted={props.highlighted}
+                    />
+
+                    {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>
+        )
+    }
+}
+
+interface LanguageTabSwitcherProps {
+    description: string;
+    highlighted: HighlightedCode[]
+}
+
+function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
+    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 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 part="copy">
+            {highlighted?.map((codeblock, i) => (
+                <TabsPrimitive.Content value={codeblock.meta || codeblock.lang} asChild key={i}>
+                    <CodeCopy text={codeblock.value} />
+                </TabsPrimitive.Content>
+            ))}
+        </div>
+    </xyd-codetabs-languages>
+}

package/src/coder/CodeTabs/index.ts

@@ -0,0 +1,6 @@
+export type {
+    CodeTabsProps
+} from "./CodeTabs";
+export {
+    withCodeTabs
+} from "./CodeTabs";

package/src/coder/CodeTheme/CodeTheme.tsx

@@ -0,0 +1,126 @@
+import React, { createContext, useState, use, useEffect, Suspense } from "react";
+import { Theme } from "@code-hike/lighter";
+import { highlight } from "codehike/code";
+import type { HighlightedCode as CodeHikeHighlightedCode } from "codehike/code";
+
+import defaultTheme from "../themes/cosmo"
+import { Loader } from "../../kit";
+
+export interface CodeThemeProps {
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode;
+}
+
+export interface SyntaxHighlightedCode extends CodeHikeHighlightedCode {
+    title?: string
+}
+
+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;
+
+    title?: string
+
+    /** The highlighted code. */
+    highlighted?: SyntaxHighlightedCode
+}
+
+const CodeThemeProvider = createContext<{
+    highlighted: SyntaxHighlightedCode[];
+}>({
+    highlighted: [],
+});
+
+export function useCodeTheme() {
+    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) {
+    // Initialize with server-side highlighted codeblocks
+    const [highlighted, setHighlighted] = useState<HighlightedCode[] | undefined>(initializeHighlighted(props.codeblocks));
+    const [clientSideFetch, setClientSideFetch] = useState(true)
+
+    useEffect(() => {
+        setHighlighted(initializeHighlighted(props.codeblocks))
+    }, [props.codeblocks])
+
+    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 [];
+
+        return codeblocks.map(codeblock => {
+            if (codeblock.highlighted && codeblock.highlighted.tokens) {
+                return {
+                    ...codeblock.highlighted,
+                    meta: codeblock.highlighted?.meta || codeblock.meta,
+                    title: codeblock.title
+                };
+            }
+
+            return null
+        }).filter(Boolean) as SyntaxHighlightedCode[]
+    }
+
+    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}
+    </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))
+    );
+}

package/src/coder/CodeTheme/index.ts

@@ -0,0 +1,7 @@
+export type {CodeThemeProps, CodeThemeBlockProps} from "./CodeTheme";
+
+export {
+    CodeTheme,
+
+    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)
+}

package/src/coder/README.md

@@ -0,0 +1 @@
+# @xyd-js/components/coder