@xyd-js/components 0.1.0-build.168

package/src/coder/Code/Code.tsx

@@ -0,0 +1,171 @@
+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 { Text } from "../../writer/Text"
+import { CodeTheme, type CodeThemeBlockProps } from "../CodeTheme";
+import * as cn from "./Code.styles";
+import { CodeLoader } from "./CodeLoader";
+import { Icon } from "src/writer/Icon";
+import {useCodeSampleAnalytics} from "../CodeSample/CodeSampleAnalytics";
+
+export interface CodeProps {
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode
+}
+
+export function Code(props: CodeProps) {
+    return <Suspense fallback={<CodeLoader />}>
+        <CodeTheme
+            codeblocks={props.codeblocks}
+            theme={props.theme}
+        >
+            {props.children}
+        </CodeTheme>
+    </Suspense>
+}
+
+// TODO: fix any
+Code.LineNumber = function CodeLineNumber(props: any) {
+    if (!props.children || !props.children.length) {
+        return null
+    }
+    return (
+        <xyd-code-linenumber
+            className={cn.LineNumberHost}
+            style={{ minWidth: `${props.width}ch` }}
+        >
+            <span part="line-number">
+                {props.lineNumber}
+            </span>
+            <InnerLine merge={props} />
+        </xyd-code-linenumber>
+    )
+}
+
+// TODO: fix any
+Code.Mark = function CodeMark(props: any) {
+    return <xyd-code-mark
+        data-diff={props.annotation?.diff ? "true" : undefined}
+        data-query={props.annotation?.diff && props.annotation?.query ? props.annotation?.query : undefined}
+        data-annotated={String(!!props.annotation)}
+        className={`${cn.MarkHost}`}
+    >
+        <InnerLine
+            part="line"
+            merge={props}
+        />
+    </xyd-code-mark>
+}
+
+Code.MarkInline = function CodeMarkInline(props: any) {
+    return (
+        <xyd-code-mark-inline
+            data-diff={props.annotation?.diff ? "true" : undefined}
+            data-query={props.annotation?.diff && props.annotation?.query ? props.annotation?.query : undefined}
+            className={cn.MarkInlineHost}
+        >
+            {props.children}
+        </xyd-code-mark-inline>
+    )
+}
+
+// TODO: fix any
+Code.Bg = function CodeLine(props: any) {
+    return <xyd-code-bg
+        data-annotated={String(!!props.annotation)}
+        className={`${cn.BgHost}`}
+    >
+        {props.children}
+    </xyd-code-bg>
+}
+
+Code.Pre = function CodePre(props: {
+    codeblock: HighlightedCode,
+    size?: "full",
+    handlers: AnnotationHandler[],
+    className?: string,
+    descriptionHead?: string | React.ReactNode,
+    descriptionContent?: string | React.ReactNode,
+    descriptionIcon?: string
+}
+) {
+    const codeSampleAnalytics = useCodeSampleAnalytics()
+
+    const {
+        size,
+        className,
+        codeblock,
+        handlers,
+    } = props;
+
+    fixLastToken(codeblock)
+
+    let description: React.ReactNode | null = null
+    
+    if (props.descriptionHead || props.descriptionContent) {
+        description = <div part="code-description" className={cn.CodeDescription}>
+            <div>
+                {props.descriptionIcon ? <Icon name={props.descriptionIcon} size={16} /> : <_DefaultDescriptionIcon />}
+            </div>
+
+            <div>
+                <Text weight="bold">
+                    {props.descriptionHead}
+                </Text>
+                <span>
+                    {props.descriptionContent}
+                </span>
+            </div>
+        </div>
+    }
+
+    return <xyd-code-pre>
+        <Pre
+            part="pre"
+            data-size={size}
+            style={codeblock?.style || codeblock?.style}
+            className={`${cn.CodeHost} ${className || ""}`}
+            code={codeblock}
+            handlers={handlers}
+            ref={codeSampleAnalytics.ref}
+        />
+
+        {description}
+    </xyd-code-pre>
+}
+
+/**
+ * FOR SOME REASONS FOR SINGLE CODE BLOCKS LAST TOKEN IS EMPTY STRING
+ * 
+ * @todo: fix this
+ */
+function fixLastToken(codeblock: HighlightedCode) {
+    const lastToken = codeblock.tokens[codeblock.tokens.length - 1]
+    if (typeof lastToken === 'string' && (lastToken === ' ' || lastToken === '\n')) {
+        codeblock.tokens.pop()
+    }
+}
+
+function _DefaultDescriptionIcon() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        strokeWidth={3}
+        stroke="currentColor"
+        fill="none"
+        width={16}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12l8 -4.5" />
+        <path d="M12 12v9" />
+        <path d="M12 12l-8 -4.5" />
+        <path d="M12 12l8 4.5" />
+        <path d="M12 3v9" />
+        <path d="M12 12l-8 4.5" />
+    </svg>
+}

package/src/coder/Code/CodeLoader.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+import * as cn from "./Code.styles";
+import {Loader} from "../../kit";
+
+export function CodeLoader() {
+    return <xyd-code-loader className={cn.CodeHost}>
+        <Loader/>
+    </xyd-code-loader>
+}

package/src/coder/Code/annotations.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { AnnotationHandler, BlockAnnotation, InnerLine } from "codehike/code";
+
+import { Code } from "./Code";
+
+const markAnnotation: AnnotationHandler = {
+    name: "mark",
+    Line: (props) => {
+        return <Code.Mark {...props} />
+    },
+    Inline: (props) => {
+        return <Code.MarkInline {...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 diffAnnotation: AnnotationHandler = {
+    name: "diff",
+    onlyIfAnnotated: true,
+    transform: (annotation: BlockAnnotation) => {
+        return [annotation, { ...annotation, name: "mark", query: annotation.query, diff: true }]
+    },
+    Line: ({ annotation, ...props }) => (
+        <>
+            <div>
+                {annotation?.query}
+            </div>
+            <InnerLine merge={props} />
+        </>
+    ),
+}
+
+export const annotations = {
+    mark: markAnnotation,
+    bg: bgAnnotation,
+    lineNumbers: lineNumberAnnotation,
+    diff: diffAnnotation
+}

package/src/coder/Code/highlight.ts

@@ -0,0 +1,208 @@
+import {
+    type CodeAnnotation,
+    type RawCode,
+    type HighlightedCode,
+    type Token
+} from 'codehike/code';
+import {
+    type Lines,
+    type Tokens,
+    highlight as lighterAsync,
+    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
+    };
+}
+
+export async function highlightAsync(
+    data: RawCode,
+    theme: Theme,
+    lang: string
+): Promise<HighlightedCode> {
+    if (!LANG_NAMES.includes(lang)) {
+        console.warn(`Unknown language "${lang}"`);
+        lang = 'txt';
+    }
+
+    const {
+        lines,
+        lang: lighterLang,
+        style
+    } = await lighterAsync(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,16 @@
+export {
+    annotations
+} from "./annotations"
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code,
+} from "./Code"
+export {
+    CodeLoader,
+} from "./CodeLoader"
+export {
+    highlight,
+    highlightAsync
+} from "./highlight"

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

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

package/src/coder/CodeCopy/CodeCopy.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react"
+import { Copy, CheckCheck } from "lucide-react"
+
+import { useUXEvents } from "../../uxsdk"
+
+import * as cn from "./CodeCopy.styles"
+
+export interface CodeCopyProps {
+    text: string
+}
+
+export function CodeCopy({ text }: CodeCopyProps) {
+    const [copied, setCopied] = useState(false)
+    const ux = useUXEvents()
+
+    function onClick() {
+        navigator.clipboard.writeText(text)
+        setCopied(true)
+        ux.docs.code.copy({ code: text })
+        setTimeout(() => {
+            setCopied(false)
+        }, 1200)
+    }
+
+    return <xyd-code-copy>
+        <button
+            part="button"
+            className={cn.CodeCopyHost}
+            aria-label="Copy to clipboard"
+            onClick={onClick}
+        >
+            {copied ? <CheckCheck size={16} /> : <Copy size={16} />}
+        </button>
+    </xyd-code-copy>
+
+}

package/src/coder/CodeCopy/index.ts

@@ -0,0 +1,7 @@
+export {
+    CodeCopy
+} from "./CodeCopy"
+
+export type {
+    CodeCopyProps
+} from "./CodeCopy"

package/src/coder/CodeSample/CodeSample.tsx

@@ -0,0 +1,118 @@
+import React, {useEffect, useState} from "react";
+import {Theme} from "@code-hike/lighter";
+
+import type {CodeThemeBlockProps} from "../CodeTheme";
+
+import {
+    Code,
+    annotations,
+} from "../Code"
+import {
+    withCodeTabs
+} from "../CodeTabs";
+import {useCodeTheme} from "../CodeTheme";
+import {useCoder} from "../CoderProvider";
+import {CodeSampleAnalytics} from "./CodeSampleAnalytics";
+
+export interface CodeSampleProps {
+    name: string;
+    description: string;
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme
+    size?: "full"
+    lineNumbers?: boolean
+    descriptionHead?: string
+    descriptionContent?: string | React.ReactNode
+    descriptionIcon?: string
+    kind?: "secondary"
+    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 <CodeSampleAnalytics>
+        <Code
+            codeblocks={props.codeblocks}
+            theme={props.theme}
+        >
+            <$ThemedCodeSample {...props} />
+        </Code>
+    </CodeSampleAnalytics>
+}
+
+function $ThemedCodeSample(props: CodeSampleProps) {
+    const {highlighted} = useCodeTheme()
+    const coder = useCoder()
+
+    if (props.kind === "secondary") {
+        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>
+    }
+
+    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) => {
+    const {lineNumbers, size, descriptionHead, descriptionContent, descriptionIcon} = React.useContext(CodeContext)
+    const handlers = [
+        annotations.mark,
+        annotations.bg,
+        annotations.diff
+    ]
+
+    if (lineNumbers) {
+        handlers.push(annotations.lineNumbers)
+    }
+
+    return <Code.Pre
+        {...props}
+        descriptionHead={descriptionHead}
+        descriptionContent={descriptionContent}
+        descriptionIcon={descriptionIcon}
+        size={size}
+        handlers={handlers}
+    />
+})
+