@xyd-js/components 0.1.0-xyd.2 → 0.1.0-xyd.3

package/src/coder/Code/Code.styles.tsx

@@ -0,0 +1,50 @@
+import {css} from "@linaria/core";
+
+export const $mark = {
+    host: css`
+        display: flex;
+        border-left-width: 4px;
+        border-color: transparent;
+        margin: 4px 0;
+    `,
+    line: css`
+        flex: 1 1 0%;
+    `,
+    $$annotated: css`
+        border-color: #60A5FA;
+        background-color: #EEF2FF;
+    `
+}
+
+export const $lineNumber = {
+    host: css`
+        margin: 0 12px 0px 4px;
+        //text-align: right;
+        user-select: none;
+        opacity: 0.5;
+    `
+}
+
+export const $code = {
+    host: css`
+        max-height: 400px;
+        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+
+        margin: 0;
+        padding: 8px 16px;
+
+        border-top: 1px solid rgb(236, 236, 241);
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+
+        font-size: 12px;
+        line-height: 20px;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        overflow-y: scroll;
+    `,
+    host$$full: css`
+        max-height: 100%;   
+    `
+}

package/src/coder/Code/Code.tsx

@@ -0,0 +1,79 @@
+import React, {Suspense} from "react";
+import type {HighlightedCode, AnnotationHandler} from "codehike/code";
+import {InnerLine, Pre} from "codehike/code";
+import {Theme} from "@code-hike/lighter";
+
+import {CodeTheme, type CodeThemeBlockProps} from "../CodeTheme";
+import {$lineNumber, $mark, $code} from "./Code.styles.tsx";
+
+export interface CodeProps {
+    codeblocks: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode
+}
+
+export function Code(props: CodeProps) {
+    return <Suspense fallback={<$Loading/>}>
+        <CodeTheme codeblocks={props.codeblocks} theme={props.theme}>
+            {props.children}
+        </CodeTheme>
+    </Suspense>
+}
+
+function $Loading() {
+    return <>
+        loading...
+    </>
+}
+
+// TODO: fix any
+Code.LineNumber = function LineNumber(props: any) {
+    if (!props.children || !props.children.length) {
+        return null
+    }
+    return (
+        <>
+        <span
+            style={{minWidth: `${props.width}ch`}}
+            className={$lineNumber.host}
+        >
+          {props.lineNumber}
+        </span>
+            <InnerLine merge={props}/>
+        </>
+    )
+}
+
+// TODO: fix any
+Code.Mark = function Mark(props: any) {
+    return <div className={`${$mark.host} ${props.annotation && $mark.$$annotated}`}>
+        <InnerLine
+            merge={props}
+            className={$mark.line}
+        />
+    </div>
+}
+
+// TODO: fix any
+Code.Bg = function CodeLine(props: any) {
+    return <span className={`${props.annotation && $mark.$$annotated}`}>
+        {props.children}
+    </span>
+}
+
+Code.Pre = function CodePre(props: {
+                                codeblock: HighlightedCode,
+                                size?: "full",
+                                handlers: AnnotationHandler[]
+                            }
+) {
+    return <Pre
+        className={`
+            ${$code.host}
+            ${props?.size === "full" && $code.host$$full}
+        `}
+        style={props.codeblock?.style || props.codeblock?.style}
+        code={props.codeblock}
+        handlers={props.handlers}
+    />
+}

package/src/coder/Code/annotations.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {AnnotationHandler} from "codehike/code";
+
+import {Code} from "./Code.tsx";
+
+const markAnnotation: AnnotationHandler = {
+    name: "mark",
+    Line: (props) => {
+        return <Code.Mark {...props}/>
+    }
+}
+
+const bgAnnotation: AnnotationHandler = {
+    name: "bg",
+    Inline: (props) => {
+        return <Code.Bg {...props}/>
+    }
+}
+
+const lineNumberAnnotation: AnnotationHandler = {
+    name: "line-numbers",
+    Line: ({annotation, ...props}) => {
+        return <Code.LineNumber {...props}/>
+    },
+}
+
+export const annotations = {
+    mark: markAnnotation,
+    bg: bgAnnotation,
+    lineNumbers: lineNumberAnnotation
+}

package/src/coder/Code/highlight.ts

@@ -0,0 +1,170 @@
+import {
+    type CodeAnnotation,
+    type RawCode,
+    type HighlightedCode,
+    type Token
+} from 'codehike/code';
+import {
+    type Lines,
+    type Tokens,
+    highlightSync as lighter,
+    LANG_NAMES,
+    type Theme
+} from '@code-hike/lighter';
+
+type Whitespace = string
+
+type AnyToken = Token | Whitespace
+
+function isWhitespace(token: Token | Whitespace): token is Whitespace {
+    return typeof token === 'string';
+}
+
+export function highlight(
+    data: RawCode,
+    theme: Theme,
+    lang: string
+): HighlightedCode {
+    if (!LANG_NAMES.includes(lang)) {
+        console.warn(`Unknown language "${lang}"`);
+        lang = 'txt';
+    }
+
+    const {
+        lines,
+        lang: lighterLang,
+        style
+    } = lighter(data.value, lang, theme as any, {
+        annotations: [],
+        scopes: false // true for better token transitions, but breaks css themes
+    });
+
+    const tokens = joinLines(lines);
+    // split surrounding whitespace for each token
+    const splitTokens = splitWhitespace(tokens);
+    // join consecutive whitespace tokens
+    const joinedTokens = joinWhitespace(splitTokens);
+
+    return {
+        ...data,
+        code: data.value,
+        tokens: joinedTokens,
+        lang: lighterLang,
+        annotations: [], // TODO: in the future
+        // annotations: compatAnnotations(annotations),
+        themeName: typeof theme === 'string' ? theme : theme?.name || 'unknown',
+        style
+    };
+}
+
+function compatAnnotations(annotations: any[]): CodeAnnotation[] {
+    const newAnnotations: CodeAnnotation[] = [];
+    for (const a of annotations) {
+        const {name, query, ranges} = a;
+        for (const r of ranges) {
+            if (r.lineNumber) {
+                const {lineNumber, fromColumn, toColumn} = r;
+                newAnnotations.push({
+                    name,
+                    query,
+                    lineNumber,
+                    fromColumn,
+                    toColumn
+                });
+            } else {
+                const {fromLineNumber, toLineNumber} = r;
+                newAnnotations.push({
+                    name,
+                    query,
+                    fromLineNumber,
+                    toLineNumber
+                });
+            }
+        }
+    }
+    return newAnnotations;
+}
+
+// group the Lines into one array
+function joinLines(lines: Lines): AnyToken[] {
+    const joinedTokens: AnyToken[] = [];
+    lines.forEach((lineOrGroup, i) => {
+        if ('lines' in lineOrGroup) {
+            throw new Error('Shouldnt be groups');
+        } else {
+            const tokens = joinTokens(lineOrGroup.tokens);
+            joinedTokens.push(...tokens);
+            if (i < lines.length - 1) {
+                joinedTokens.push('\n');
+            }
+        }
+    });
+    return joinedTokens;
+}
+
+function joinTokens(tokens: Tokens): AnyToken[] {
+    return tokens.map((tokenOrGroup) => {
+        if ('tokens' in tokenOrGroup) {
+            throw new Error('Shouldnt be groups');
+        } else {
+            const t = [tokenOrGroup.content] as Token;
+            const {color, ...rest} = tokenOrGroup.style || {};
+            t.push(color);
+            if (Object.keys(rest).length) {
+                t.push(rest);
+            }
+            return t;
+        }
+    });
+}
+
+function splitWhitespace(tokens: AnyToken[]) {
+    const ejected: AnyToken[] = [];
+    tokens.forEach((tokenOrGroup) => {
+        if (isWhitespace(tokenOrGroup)) {
+            ejected.push(tokenOrGroup);
+        } else {
+            const [before, content, after] = splitSurroundingWhitespace(
+                tokenOrGroup[0]
+            );
+            if (before?.length) {
+                ejected.push(before);
+            }
+            if (content.length) {
+                const copy = [...tokenOrGroup] as Token;
+                copy[0] = content;
+                ejected.push(copy);
+            }
+            if (after?.length) {
+                ejected.push(after);
+            }
+        }
+    });
+    return ejected;
+}
+
+function joinWhitespace(tokens: AnyToken[]) {
+    const joinedTokens: AnyToken[] = [];
+    tokens.forEach((tokenOrGroup) => {
+        if (isWhitespace(tokenOrGroup)) {
+            let last = joinedTokens[joinedTokens.length - 1];
+            if (last && isWhitespace(last)) {
+                joinedTokens[joinedTokens.length - 1] += tokenOrGroup;
+            } else if (tokenOrGroup !== '') {
+                joinedTokens.push(tokenOrGroup);
+            }
+        } else if (tokenOrGroup[0].length > 0) {
+            joinedTokens.push(tokenOrGroup);
+        }
+    });
+    return joinedTokens;
+}
+
+// splits " \t foo bar \n" into [" \t ","foo bar"," \n"]
+// "foo bar" -> ["","foo bar",""]
+function splitSurroundingWhitespace(content: string) {
+    const trimmed = content.trim();
+    const before = content.slice(0, content.indexOf(trimmed));
+    const after = content.slice(content.indexOf(trimmed) + trimmed.length);
+    return [before, trimmed, after];
+}

package/src/coder/Code/index.ts

@@ -0,0 +1,12 @@
+export {
+    annotations
+} from "./annotations"
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code
+} from "./Code"
+export {
+    highlight
+} from "./highlight"

package/src/coder/CodeSample/CodeSample.tsx

@@ -1,150 +1,47 @@
-import React, {useEffect, useState} from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs"; // TODO: remove and use separation
-import {
-    AnnotationHandler,
-    InnerLine,
-    Pre,
-    highlight,
-    HighlightedCode,
-} from "codehike/code"
+import React from "react";
+import {Theme} from "@code-hike/lighter";
+
+import type {CodeThemeBlockProps} from "../CodeTheme";
 
 import {
-    CodeCopy,
-} from "../CodeCopy";
-import {theme as defaultTheme} from "./default-theme" // TODO: support multiple themes
-import {withLocalStored} from "./withLocalStored";
+    Code,
+    annotations,
+} from "../Code"
 import {
-    $sample,
-    $languages,
-    $code,
-    $mark,
-    $lineNumber
-} from "./CodeSample.styles";
-
-// TODO: try to use codehiki in build time / ASYNC !!! - we need rr server-components
-// TODO: separate highlight
-
-export interface MDXCodeSampleBlock {
-    /** 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;
-}
+    withCodeTabs
+} from "../CodeTabs";
+import {useCodeTheme} from "../CodeTheme";
 
 export interface CodeSampleProps {
     name: string;
     description: string;
-    codeblocks: MDXCodeSampleBlock[];
+    codeblocks: CodeThemeBlockProps[];
     size?: "full"
+    theme?: Theme
 }
 
 export function CodeSample(props: CodeSampleProps) {
-    const [highlighted, setHighlighted] = useState<HighlightedCode[]>([]);
-
-    useEffect(() => {
-        async function fetchHighlight() {
-            const result = await Promise.all(
-                props.codeblocks?.map((codeblock) => highlight(codeblock, defaultTheme))
-            );
-
-            setHighlighted(result);
-        }
-
-        fetchHighlight();
-    }, [props.codeblocks]);
-
-    if (highlighted.length === 0) {
-        return <div>Loading</div>;
-    }
-
-    if (!highlighted) {
-        return <div>Loading</div>;
-    }
-
-    return (
-        <TabsPrimitive.Root
-            className={$sample.host}
-            style={highlighted[0]?.style}
-            defaultValue={highlighted[0]?.meta}
-            // localStorageKey={`preferredLanguage[${name}]`}
-        >
-            <div className={$languages.host}>
-                <$Description description={props.description}/>
-
-                <TabsPrimitive.List className={$languages.list}>
-                    {props.codeblocks?.map(({meta}, i) => (
-                        <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
-                            {meta}
-                        </TabsPrimitive.Trigger>
-                    ))}
-                </TabsPrimitive.List>
-
-                <div className={$languages.copy}>
-                    {props.codeblocks?.map((codeblock, i) => (
-                        <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
-                            <CodeCopy text={codeblock.value}/>
-                        </TabsPrimitive.Content>
-                    ))}
-                </div>
-            </div>
-
-            {highlighted?.map((codeblock, i) => (
-                <TabsPrimitive.Content value={codeblock.meta} key={i}>
-                    <Pre
-                        className={`
-                            ${$code.host}
-                            ${props?.size === "full" && $code.host$$full}
-                        `}
-                        style={codeblock?.style || codeblock?.style}
-                        code={codeblock}
-                        handlers={[mark, lineNumber]}
-                    />
-                </TabsPrimitive.Content>
-            ))}
-        </TabsPrimitive.Root>
-    )
+    return <Code codeblocks={props.codeblocks} theme={props.theme}>
+        <$ThemedCodeSample {...props}/>
+    </Code>
 }
 
-function $Description(props: { description: string }) {
-    return <div className={$languages.description}>
-        <div className={$languages.description$item}>
-            {props.description}
-        </div>
-    </div>
-}
+function $ThemedCodeSample(props: CodeSampleProps) {
+    const {highlighted} = useCodeTheme()
 
-const mark: AnnotationHandler = {
-    name: "Mark",
-    Line: ({annotation, ...props}) => {
-        return (
-            <div className={`${$mark.host} ${annotation && $mark.$$annotated}`}>
-                <InnerLine
-                    merge={props}
-                    className={$mark.line}
-                />
-            </div>
-        )
-    },
+    return <$CodeSampleTabs
+        description={props.description}
+        highlighted={highlighted}
+        size={props.size}
+    />
 }
 
-const lineNumber: AnnotationHandler = {
-    name: "LineNumber",
-    Line: ({annotation, ...props}) => {
-        const width = props.totalLines.toString().length + 1
-
-        return (
-            <>
-        <span
-            style={{minWidth: `${width}ch`}}
-            className={$lineNumber.host}
-        >
-          {props.lineNumber}
-        </span>
-                <InnerLine merge={props}/>
-            </>
-        )
-    },
-}
+const $CodeSampleTabs = withCodeTabs((props) => <Code.Pre
+    {...props}
+    handlers={[
+        annotations.mark,
+        annotations.bg,
+        annotations.lineNumbers
+    ]}
+/>)
 

package/src/coder/CodeSample/index.ts

@@ -8,5 +8,4 @@ export {
 
 export type {
     CodeSampleProps,
-    MDXCodeSampleBlock,
 } from "./CodeSample";

package/src/coder/CodeSample/withLocalStored.tsx

@@ -7,7 +7,7 @@ export interface CodeTabsProps {
     children: React.ReactNode
 }
 
-// TODO: interface
+// TODO: move to CodeTabs?
 export function withLocalStored(Component: any) {
     return function LocalStored(props: CodeTabsProps) {
         const [value, setValue] = useState(

package/src/coder/{CodeSample/CodeSample.styles.tsx → CodeTabs/CodeTabs.styles.tsx}

@@ -87,51 +87,3 @@ export const $languages = {
     `
 }
 
-export const $code = {
-    host: css`
-        max-height: 400px;
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
-
-        margin: 0;
-        padding: 8px 16px;
-
-        border-top: 1px solid rgb(236, 236, 241);
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-
-        font-size: 12px;
-        line-height: 20px;
-        white-space: pre-wrap;
-        word-break: break-all;
-
-        overflow-y: scroll;
-    `,
-    host$$full: css`
-        max-height: 100%;   
-    `
-}
-
-export const $mark = {
-    host: css`
-        display: flex;
-        border-left-width: 4px;
-        border-color: transparent;
-        margin: 4px 0;
-    `,
-    line: css`
-        flex: 1 1 0%;
-    `,
-    $$annotated: css`
-        border-color: #60A5FA;
-        background-color: #EEF2FF;
-    `
-}
-
-export const $lineNumber = {
-    host: css`
-        margin: 0 4px;
-        //text-align: right;
-        user-select: none;
-        opacity: 0.5;
-    `
-}

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -0,0 +1,82 @@
+import React, {} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+    HighlightedCode,
+} from "codehike/code"
+
+import {
+    CodeCopy,
+} from "../CodeCopy";
+import {
+    $sample,
+    $languages,
+} from "./CodeTabs.styles.tsx"; // TODO: style by highlighted?
+
+export interface CodeTabsProps {
+    description: string;
+    highlighted: HighlightedCode[]
+    size?: "full"
+}
+
+export function withCodeTabs(PreComponent) {
+    return function CodeTabs(props: CodeTabsProps) {
+        return (
+            <TabsPrimitive.Root
+                className={$sample.host}
+                style={props.highlighted[0]?.style}
+                defaultValue={props.highlighted[0]?.meta}
+            >
+                <$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>
+        )
+    }
+}
+
+interface LanguageTabSwitcherProps {
+    description: string;
+    highlighted: HighlightedCode[]
+}
+
+function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
+    return <div className={$languages.host}>
+        <$Description description={props.description}/>
+
+        <TabsPrimitive.List className={$languages.list}>
+            {props.highlighted?.map(({meta}, i) => (
+                <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
+                    {meta}
+                </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}/>
+                </TabsPrimitive.Content>
+            ))}
+        </div>
+    </div>
+}
+
+function $Description(props: { description: string }) {
+    return <div className={$languages.description}>
+        <div className={$languages.description$item}>
+            {props.description}
+        </div>
+    </div>
+}
+
+

package/src/coder/CodeTabs/index.ts

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