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

package/src/coder/hooks/highlight.ts

@@ -0,0 +1,182 @@
+// import { splitAnnotationsAndCode } from './extract-annotations.js';
+import {
+    type CodeAnnotation,
+    type RawCode,
+    type HighlightedCode,
+    type Token
+    // Whitespace,
+    // isWhitespace,
+} 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 {
+    // let { value, lang = 'txt' } = data;
+
+    if (!LANG_NAMES.includes(lang)) {
+        console.warn(`Unknown language "${lang}"`);
+        lang = 'txt';
+    }
+
+    // const { code, annotations } = await splitAnnotationsAndCode(
+    //   value,
+    //   lang,
+    //   config.annotationPrefix || '!'
+    // );
+    //
+
+    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/index.ts

@@ -5,15 +5,16 @@ export type {
     CodeProps
 } from "./Code"
 export {
-    Code
-} from "./Code"
-export {
+    Code,
+    CodeLoader,
+
+    highlightAsync,
     highlight
 } from "./Code"
 //
 
-export type {CodeSampleProps} from "./CodeSample";
-export {CodeSample} from "./CodeSample";
+export type { CodeSampleProps } from "./CodeSample";
+export { CodeSample } from "./CodeSample";
 //
 
 export type {
@@ -24,10 +25,13 @@ export {
 } from "./CodeTabs";
 //
 
-export type {CodeThemeProps, CodeThemeBlockProps} from "./CodeTheme";
+export type { CodeThemeProps, CodeThemeBlockProps } from "./CodeTheme";
 export {
     CodeTheme,
-    CodeThemeCSR,
 
     useCodeTheme
 } from "./CodeTheme";
+
+export {
+    CoderProvider
+} from "./CoderProvider";

package/src/content/ContentDecoator.styles.tsx

@@ -0,0 +1,113 @@
+import { css } from "@linaria/core";
+
+export default {
+    ContentDecoratorHost: css`
+        @layer components {
+            --space-small: 8px;
+            --space-medium: 16px;
+            --space-large: 20px;
+            --space-xlarge: 24px;
+            --space-xxlarge: 32px;
+            --space-2xlarge: 50px;
+
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+
+            p:not(li p):not(ul p):not(xyd-callout p):not(xyd-codetabs p):not(xyd-guidecard p):not([data-button="true"] p) {
+                margin-top: var(--space-medium);
+            }
+            
+            details {
+                --xyd-callout-bgcolor: var(--white);
+                margin-top: var(--space-medium);
+
+                summary {
+                    [part="summary-deep"], [part="summary-deep-label"] {
+                        font-size: var(--xyd-font-size-small);
+                        line-height: var(--xyd-line-height-small);
+                    }
+                    [part="summary-deep-label"] {
+                        font-weight: bold;
+                    }
+                }
+
+                &[data-kind="secondary"] {
+                    code {
+                        background: var(--xyd-details-bgcolor--secondary);
+                    }
+                }
+            }
+
+            hr {
+                margin: var(--space-xxlarge) 0;
+            }
+            
+            p {
+                display: block;
+
+                code {
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-small);
+                    margin: 0;
+                }
+            }
+            
+            h2,h3,h4,h5,h6 {
+                margin-top: var(--space-xxlarge);
+                &[data-kind="muted"] {
+                    display: block;
+                }
+            }
+            h2 {
+                margin-top: var(--space-2xlarge);
+            }
+            h2:first-of-type {
+                margin-top: var(--space-xxlarge);
+            }
+
+            h4 {
+                &[data-kind="muted"] {
+                    margin: 4px 0 16px;
+                }
+            }
+            
+       
+            ul:not(xyd-underlinenav ul), ol:not(xyd-underlinenav ol) {
+                margin-top: var(--space-medium);
+            }
+            
+            xyd-codetabs, xyd-callout, xyd-guidecard, xyd-tabs {
+                margin: var(--space-large) 0;
+            }
+            xyd-guidecard [part="body"]  {
+                color: var(--dark48);
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-medium);
+
+                p {
+                    color: var(--dark48);
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-medium);
+                }
+            }
+            xyd-guidecard-list xyd-guidecard {
+                margin-bottom: 0;
+            }
+            xyd-tabs [part="buttons"] {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+
+            xyd-callout {
+                --xyd-font-size-medium: var(--xyd-font-size-small);
+            }
+        
+            xyd-codetabs {
+                xyd-code-pre {
+                    font-size: var(--xyd-font-size-xsmall);
+                    line-height: var(--xyd-line-height-xsmall);
+                }
+            }
+        }
+    `
+}

package/src/content/ContentDecorator.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import cn from "./ContentDecoator.styles";
+
+interface ContentDecoratorProps {
+    children: React.ReactNode
+    metaComponent?: string
+}
+
+export function ContentDecorator({ children, metaComponent }: ContentDecoratorProps) {
+    return <xyd-content-decorator
+        className={cn.ContentDecoratorHost}
+        meta-component={metaComponent || undefined}
+    >
+        {children}
+    </xyd-content-decorator>
+}

package/src/content/GridDecorator.styles.tsx

@@ -0,0 +1,67 @@
+import { css } from "@linaria/core";
+
+export default {
+    GridDecoratorHost: css`
+        @layer components {
+            display: grid;
+            gap: 1rem;
+            width: 100%;
+
+            /* First level ul - 1fr */
+            > ul {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 1rem;
+                width: 100%;
+            }
+
+            /* Nested ul - 2fr */
+            ul ul {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+                width: 100%;
+            }
+
+            &[data-cols] {
+                --cols: var(--data-cols, 2);
+                ul ul {
+                    grid-template-columns: repeat(var(--cols), 1fr);
+                }
+            }
+
+            &[data-cols="2"] { --data-cols: 2; }
+            &[data-cols="3"] { --data-cols: 3; }
+            &[data-cols="4"] { --data-cols: 4; }
+            &[data-cols="5"] { --data-cols: 5; }
+            &[data-cols="6"] { --data-cols: 6; }
+
+            @media (max-width: 768px) {
+                > ul {
+                    gap: 0;
+                }
+                ul ul {
+                    grid-template-columns: 1fr;
+                }
+            }
+
+            ul, ol, li {
+                &::before {
+                    content: none;
+                }
+            }
+
+            ul, ol {
+                display: grid;
+                margin: 0;
+                padding: 0 !important;
+                list-style: none;
+            }
+
+            li {
+                margin-left: 0 !important;
+                padding-left: 0 !important;
+            }
+        }
+    `
+}

package/src/content/GridDecorator.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import cn from "./GridDecorator.styles";
+
+interface GridDecoratorProps {
+    cols?: 2 | 3 | 4 | 5 | 6
+}
+/**
+ * A wrapper component that applies grid decoration styling to its children.
+ * This component uses a custom element `xyd-grid-decorator` to provide grid-based layout decoration.
+ * 
+ * @category Component
+ */
+export function GridDecorator({ children, cols }: GridDecoratorProps) {
+    return <xyd-grid-decorator 
+        className={cn.GridDecoratorHost}
+        data-cols={cols}
+    >
+        {children}
+    </xyd-grid-decorator>
+}