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

package/rollup.config.js

@@ -1,24 +1,24 @@
 import fs from 'fs';
 import path from 'path';
-import {fileURLToPath} from 'url';
+import { fileURLToPath } from 'url';
 
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import dts from 'rollup-plugin-dts';
-import {terser} from 'rollup-plugin-terser';
+import { terser } from 'rollup-plugin-terser';
 import babel from '@rollup/plugin-babel';
 import postcss from 'rollup-plugin-postcss';
 import wyw from '@wyw-in-js/rollup';
 
-import {createRequire} from 'module';
+import { createRequire } from 'module';
 
 const require = createRequire(import.meta.url);
 const {
     dependencies,
     peerDependencies,
     devDependencies
-} = require('./package.json', {assert: {type: 'json'}});
+} = require('./package.json', { assert: { type: 'json' } });
 
 const external = [
     ...Object.keys(dependencies),
@@ -47,6 +47,7 @@ export default [
             pages: 'src/pages/index.ts',
             views: 'src/views/index.ts',
             writer: 'writer.ts',
+            system: 'src/system/index.ts',
             ...themes
         },
         output: [
@@ -66,25 +67,25 @@ export default [
                         '@babel/preset-react'
                     ],
                 },
-                classNameSlug: (hash, title, {file}) => {
-                    // Get the full path after 'src/components/'
-                    const pathParts = file.split('/');
-                    const componentsIndex = pathParts.indexOf('src');
-                    if (componentsIndex === -1) return `XydComponents-Component-${title}`;
+                // classNameSlug: (hash, title, {file}) => {
+                //     // Get the full path after 'src/components/'
+                //     const pathParts = file.split('/');
+                //     const componentsIndex = pathParts.indexOf('src');
+                //     if (componentsIndex === -1) return `XydComponents-Component-${title}`;
 
-                    // Get everything after 'components' directory
-                    const componentPath = pathParts
-                        .slice(componentsIndex + 1)
-                        .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
-                        .join('-');
+                //     // Get everything after 'components' directory
+                //     const componentPath = pathParts
+                //         .slice(componentsIndex + 1)
+                //         .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                //         .join('-');
 
-                    // Use the title as the style name (it's already the variable name)
-                    const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+                //     // Use the title as the style name (it's already the variable name)
+                //     const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
 
-                    // TODO: in the future hash + system to override styles for specific components if hash
-                    return `XydComponents-Component-${componentPath}__${styleName}`;
-                    // return `XydComponents-Component-${componentPath}__${styleName}_${hash}`;
-                }
+                //     // TODO: in the future hash + system to override styles for specific components if hash
+                //     return `XydComponents-Component-${componentPath}__${styleName}`;
+                //     // return `XydComponents-Component-${componentPath}__${styleName}_${hash}`;
+                // }
             }),
             postcss({
                 extract: true,
@@ -182,6 +183,15 @@ export default [
         plugins: [dts()],
         external
     },
+    {
+        input: 'src/system/index.ts',
+        output: {
+            file: 'dist/system.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
     ...Object.keys(themes).map(theme => ({
         input: themes[theme],
         output: {

package/src/brand/Button/Button.styles.tsx

@@ -4,12 +4,9 @@ export const ButtonHost = css`
     display: inline-block;
     border: 1px solid transparent;
     text-align: center;
-    font-weight: 600;
     white-space: nowrap;
     border-radius: 20px;
     padding: 0 20px;
-    line-height: 38px;
-    font-size: 14px;
     border-color: transparent;
     color: #3c3c43;
     background-color: #f7f7f8;

package/src/brand/CTABanner/CTABanner.styles.tsx

@@ -60,8 +60,7 @@ export const CTABannerHeadingHost = css`
 `;
 
 export const CTABannerHeadingTitle = css`
-    font-size: 76px;
-    font-weight: 900;
+    font-weight: var(--xyd-font-weight-black);
     text-align: center;
     letter-spacing: 3px;
     margin: 0;
@@ -69,8 +68,7 @@ export const CTABannerHeadingTitle = css`
 
 export const CTABannerHeadingSubtitle = css`
     color: #3c3c43;
-    font-size: 46px;
-    font-weight: 600;
+    font-weight: var(--xyd-font-weight-semibold);
     text-align: center;
 `;
 

package/src/brand/Footer/Footer.styles.tsx

@@ -14,8 +14,5 @@ export const FooterContainer = css`
 `;
 
 export const FooterTextContainer = css`
-    line-height: 24px;
-    font-size: 14px;
-    font-weight: 500;
     color: rgba(60, 60, 67, .78);
 `; 

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

@@ -1,47 +1,149 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
-export const MarkHost = css`
-    display: flex;
-    border-left-width: 4px;
-    border-color: transparent;
-    margin: 4px 0;
+export const LineNumberHost = css`
+    @layer defaults {
+        display: flex;
+        position: relative;
+        
+        [part="line-number"] {
+            /* margin: 0 12px 0px 4px; */
+            width: 25px;
+            left: -15px;
+            position: absolute;
+            margin: 0;
+            text-align: right;
+            user-select: none;
+            opacity: 0.5;
+        }
+    }
 `;
 
-export const MarkLine = css`
-    flex: 1 1 0%;
-`;
+export const MarkHost = css`
+    @layer defaults {
+        display: flex;
+        border-left-width: 4px;
+        border-color: transparent;
+        margin: 4px 0;
 
-export const MarkAnnotated = css`
-    border-color: #60A5FA;
-    background-color: #EEF2FF;
-`;
+        &[data-annotated="true"] {
+            border-color: var(--xyd-coder-code-mark-border-color);
+            background-color: var(--xyd-coder-code-mark-bgcolor);
+        }
 
-export const LineNumberHost = css`
-    margin: 0 12px 0px 4px;
-    //text-align: right;
-    user-select: none;
-    opacity: 0.5;
+        &[data-diff="true"] {
+            position: relative;
+
+            &[data-query="-"] {
+                border-color: var(--xyd-text-color--error--active);
+                background-color: var(--xyd-text-color--error--muted);
+            }
+
+            &[data-query="+"] {
+                border-color: var(--xyd-text-color--success--active);
+                background-color: var(--xyd-text-color--success--muted);
+            }
+
+            & > :first-child {
+                position: absolute;
+                left: 5px;
+            }
+        }
+
+        [part="line"] {
+            flex: 1 1 0%;
+        }
+
+        xyd-code-linenumber [part="line"]{
+            position: relative;
+            left: 25px;
+        }
+    }
 `;
 
+export const MarkInlineHost = css`
+    @layer defaults {
+        display: inline-block;
+
+        outline: solid 1px var(--xyd-coder-code-mark-border-color);
+        background: var(--xyd-coder-code-mark-bgcolor);
+
+
+        &[data-diff="true"] {
+            &[data-query="-"] {
+                border-color: var(--xyd-text-color--error--active);
+                background-color: var(--xyd-text-color--error--muted);
+            }
+
+            &[data-query="+"] {
+                border-color: var(--xyd-text-color--success--active);
+                background-color: var(--xyd-text-color--success--muted);
+            }
+        }
+    }
+`
+
+export const BgHost = css`
+    @layer defaults {
+        &[data-annotated="true"] {
+            border-color: var(--xyd-coder-code-mark-border-color);
+            background-color: var(--xyd-coder-code-mark-bgcolor);
+        }
+    }
+`
+
 export const CodeHost = css`
-    max-height: 400px;
-    background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+    @layer defaults {
+        max-height: 400px;
+        background: var(--xyd-coder-code-background); // cuz can be overwritten by style - better solution in the future?
+
+        margin: 0;
+        padding: 8px 16px;
 
-    margin: 0;
-    padding: 8px 16px;
+        border-top: 1px solid var(--xyd-coder-code-border-color);
+        
+        &:not(:has(+ [part="code-description"])) {
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
 
-    border-top: 1px solid rgb(236, 236, 241);
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
+        white-space: pre-wrap;
+        word-break: break-all;
 
-    font-size: 12px;
-    line-height: 20px;
-    white-space: pre-wrap;
-    word-break: break-all;
+        overflow-y: scroll;
 
-    overflow-y: scroll;
+        &[data-size="full"] {
+            max-height: 100%;   
+        }
+
+        & > div {
+        }
+    }
 `;
 
-export const CodeHostFull = css`
-    max-height: 100%;   
-`;
+
+export const CodeDescription = css`
+    padding: 17px 20px 10px;
+    background-color: var(--white);
+    border-radius: 0 0 8px 7px;
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    color: var(--text-primary);
+
+    & > div:first-child {
+        display: flex;
+        align-items: center;
+        padding-top: 5px;
+    }
+
+    & > div:last-child {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        > span {
+            display: flex;
+            align-items: center;
+        }
+    }
+`

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 { Text } from "../../writer/Text"
+import { CodeTheme, type CodeThemeBlockProps } from "../CodeTheme";
 import * as cn from "./Code.styles";
-import {CodeLoader} from "./CodeLoader";
+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`}}
+        <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={`${cn.MarkHost} ${props.annotation && cn.MarkAnnotated}`}>
+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={cn.MarkLine}
         />
-    </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 && cn.MarkAnnotated}`}>
+    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={`
-            ${cn.CodeHost}
-            ${props?.size === "full" && cn.CodeHostFull}
-            ${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 * as cn from "./Code.styles";
-import {Loader} from "../../ui";
+import {Loader} from "../../kit";
 
 export function CodeLoader() {
-    return <div className={cn.CodeHost}>
+    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";
+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"