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

package/src/coder/Code/Code.tsx

@@ -1,76 +1,167 @@
-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 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";
-import {CodeLoader} from "./CodeLoader.tsx";
+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";
 
 export interface CodeProps {
-    codeblocks: CodeThemeBlockProps[];
+    codeblocks?: CodeThemeBlockProps[];
     theme?: Theme
     children: React.ReactNode
 }
 
 export function Code(props: CodeProps) {
-    return <Suspense fallback={<CodeLoader/>}>
-        <CodeTheme codeblocks={props.codeblocks} theme={props.theme}>
+    return <Suspense fallback={<CodeLoader />}>
+        <CodeTheme
+            codeblocks={props.codeblocks}
+            theme={props.theme}
+        >
             {props.children}
         </CodeTheme>
     </Suspense>
 }
 
 // TODO: fix any
-Code.LineNumber = function LineNumber(props: any) {
+Code.LineNumber = function CodeLineNumber(props: any) {
     if (!props.children || !props.children.length) {
         return null
     }
     return (
-        <>
-        <span
-            style={{minWidth: `${props.width}ch`}}
-            className={$lineNumber.host}
+        <xyd-code-linenumber
+            className={cn.LineNumberHost}
+            style={{ minWidth: `${props.width}ch` }}
         >
-          {props.lineNumber}
-        </span>
-            <InnerLine merge={props}/>
-        </>
+            <span part="line-number">
+                {props.lineNumber}
+            </span>
+            <InnerLine merge={props} />
+        </xyd-code-linenumber>
     )
 }
 
 // TODO: fix any
-Code.Mark = function Mark(props: any) {
-    return <div className={`${$mark.host} ${props.annotation && $mark.$$annotated}`}>
+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}
-            className={$mark.line}
         />
-    </div>
+    </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 <span className={`${props.annotation && $mark.$$annotated}`}>
+    return <xyd-code-bg
+        data-annotated={String(!!props.annotation)}
+        className={`${cn.BgHost}`}
+    >
         {props.children}
-    </span>
+    </xyd-code-bg>
 }
 
 Code.Pre = function CodePre(props: {
-                                codeblock: HighlightedCode,
-                                size?: "full",
-                                handlers: AnnotationHandler[],
-                                className?: string,
-                            }
+    codeblock: HighlightedCode,
+    size?: "full",
+    handlers: AnnotationHandler[],
+    className?: string,
+    descriptionHead?: string | React.ReactNode,
+    descriptionContent?: string | React.ReactNode,
+    descriptionIcon?: string
+}
 ) {
-    return <Pre
-        className={`
-            ${$code.host}
-            ${props?.size === "full" && $code.host$$full}
-            ${props.className}
-        `}
-        style={props.codeblock?.style || props.codeblock?.style}
-        code={props.codeblock}
-        handlers={props.handlers}
-    />
+    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}
+        />
+
+        {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

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

package/src/coder/Code/annotations.tsx

@@ -1,31 +1,51 @@
 import React from "react";
-import {AnnotationHandler} from "codehike/code";
+import { AnnotationHandler, BlockAnnotation, InnerLine } from "codehike/code";
 
-import {Code} from "./Code.tsx";
+import { Code } from "./Code";
 
 const markAnnotation: AnnotationHandler = {
     name: "mark",
     Line: (props) => {
-        return <Code.Mark {...props}/>
-    }
+        return <Code.Mark {...props} />
+    },
+    Inline: (props) => {
+        return <Code.MarkInline {...props} />
+    },
 }
 
 const bgAnnotation: AnnotationHandler = {
     name: "bg",
     Inline: (props) => {
-        return <Code.Bg {...props}/>
+        return <Code.Bg {...props} />
     }
 }
 
 const lineNumberAnnotation: AnnotationHandler = {
     name: "line-numbers",
-    Line: ({annotation, ...props}) => {
-        return <Code.LineNumber {...props}/>
+    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
+    lineNumbers: lineNumberAnnotation,
+    diff: diffAnnotation
 }

package/src/coder/Code/highlight.ts

@@ -7,6 +7,7 @@ import {
 import {
     type Lines,
     type Tokens,
+    highlight as lighterAsync,
     highlightSync as lighter,
     LANG_NAMES,
     type Theme
@@ -57,6 +58,43 @@ export function highlight(
     };
 }
 
+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) {

package/src/coder/Code/index.ts

@@ -11,5 +11,6 @@ export {
     CodeLoader,
 } from "./CodeLoader"
 export {
-    highlight
+    highlight,
+    highlightAsync
 } from "./highlight"

package/src/coder/CodeCopy/{CodeCopy.style.tsx → CodeCopy.styles.tsx}

@@ -1,9 +1,9 @@
 import {css} from "@linaria/core";
 
-export const $copy = {
-    host: css`
+export const CodeCopyHost = css`
+    @layer defaults {
         all: unset;
-        
+    
         cursor: pointer;
 
         display: flex;
@@ -15,7 +15,7 @@ export const $copy = {
 
         &:hover {
             transition: ease-in 0.1s;
-            background: #e3e3eb;
+            background: var(--xyd-code-copy-color);
         }
-    `
-}
+    }
+`; 

package/src/coder/CodeCopy/CodeCopy.tsx

@@ -1,9 +1,7 @@
 import React, {useState} from "react"
 import {Copy, CheckCheck} from "lucide-react"
 
-import {
-    $copy
-} from "./CodeCopy.style"
+import * as cn from "./CodeCopy.styles"
 
 export interface CodeCopyProps {
     text: string
@@ -20,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={$copy.host}
         >
             {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}
+    />
+})