@xyd-js/components 0.1.0-xyd.1 → 0.1.0-xyd.11

package/src/brand/CTABanner/CTABanner.tsx

@@ -1,127 +1,49 @@
-import React from "react"
-import {css} from "@linaria/core";
+import React from "react";
+import * as cn from "./CTABanner.styles";
 
-const $banner = {
-    host: css`
-        padding: 20px;
-    `,
-    container: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 80px;
-    `,
-    hero: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 40px;
-    `,
-    headingEffect: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-
-        background: -webkit-linear-gradient(
-                120deg,
-                var(--headingEffect-color-tertiary) 20%,
-                var(--headingEffect-color-tertiary) 30%,
-                var(--headingEffect-color-secondary) 60%,
-                var(--headingEffect-color-primary) 75%,
-                var(--headingEffect-color-primary) 85%
-        );
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        animation: wave 5s infinite;
-        background-size: 200% 200%;
-        background-position: 50% 50%; // Start with all colors visible
+export interface CTABannerProps {
+    children: React.ReactNode;
+}
 
-        @keyframes wave {
-            0% {
-                background-position: 50% 50%;
-            }
-            50% {
-                background-position: 0% 50%;
-            }
-            100% {
-                background-position: 50% 50%;
-            }
-        }
-    `
+export interface CTABannerHeadingProps {
+    title: string;
+    subtitle: string;
 }
 
-export interface CTABannerProps {
-    children: React.ReactNode
+export interface CTABannerButtonGroupProps {
+    children: React.ReactNode;
 }
 
 export function CTABanner({children}: CTABannerProps) {
-    return <div className={$banner.host}>
-        <div className={$banner.container}>
-            <div className={$banner.hero}>
-                {children}
+    return (
+        <div className={cn.CTABannerHost}>
+            <div className={cn.CTABannerContainer}>
+                <div className={cn.CTABannerHero}>
+                    {children}
+                </div>
             </div>
         </div>
-    </div>
-}
-
-const $heading = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-    `,
-    title: css`
-        font-size: 76px;
-        font-weight: 900;
-        text-align: center;
-        letter-spacing: 3px;
-        margin: 0;
-    `,
-    subtitle: css`
-        color: #3c3c43;
-        font-size: 46px;
-        font-weight: 600;
-        text-align: center;
-    `
+    );
 }
 
-export interface CTABannerHeadingProps {
-    title: string
-    subtitle: string | React.ReactNode
-    headingEffect?: boolean
-}
-
-CTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {
-    return <div className={$heading.host}>
-        <h1 className={$heading.title}>
-            {
-                headingEffect
-                    ? <span className={$banner.headingEffect}>
-                        {title}
-                      </span>
-                    : title
-            }
-        </h1>
-        <p className={$heading.subtitle}>
-            {subtitle}
-        </p>
-    </div>
+function Heading({title, subtitle}: CTABannerHeadingProps) {
+    return (
+        <div className={cn.CTABannerHeadingHost}>
+            <div className={cn.CTABannerHeadingEffect}>
+                <h1 className={cn.CTABannerHeadingTitle}>{title}</h1>
+            </div>
+            <h2 className={cn.CTABannerHeadingSubtitle}>{subtitle}</h2>
+        </div>
+    );
 }
 
-const $btnGroup = {
-    host: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    `
+function ButtonGroup({children}: CTABannerButtonGroupProps) {
+    return (
+        <div className={cn.CTABannerButtonGroupHost}>
+            {children}
+        </div>
+    );
 }
 
-CTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {
-    return <div className={$btnGroup.host}>
-        {children}
-    </div>
-}
+CTABanner.Heading = Heading;
+CTABanner.ButtonGroup = ButtonGroup;

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

@@ -0,0 +1,21 @@
+import {css} from "@linaria/core";
+
+export const FooterHost = css`
+    position: relative;
+    border-top: 1px solid #f0f0f0;
+    padding: 32px;
+    background-color: #fff;
+`;
+
+export const FooterContainer = css`
+    margin: 0 auto;
+    max-width: 1200px;
+    text-align: center;
+`;
+
+export const FooterTextContainer = css`
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(60, 60, 67, .78);
+`; 

package/src/brand/Footer/Footer.tsx

@@ -1,34 +1,14 @@
 import React from "react";
-import {css} from "@linaria/core";
-
-const $footer = {
-    host: css`
-        position: relative;
-        border-top: 1px solid #f0f0f0;
-        padding: 32px;
-        background-color: #fff;
-    `,
-    container: css`
-        margin: 0 auto;
-        max-width: 1200px;
-        text-align: center;
-    `,
-    textContainer: css`
-        line-height: 24px;
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(60, 60, 67, .78);
-    `
-}
+import * as cn from "./Footer.styles";
 
 export interface FooterProps {
     children?: React.ReactNode
 }
 
 export function Footer({children}: FooterProps) {
-    return <footer className={$footer.host}>
-        <div className={$footer.container}>
-            <div className={$footer.textContainer}>
+    return <footer className={cn.FooterHost}>
+        <div className={cn.FooterContainer}>
+            <div className={cn.FooterTextContainer}>
                 {children}
             </div>
         </div>

package/src/brand/TODO.md

@@ -0,0 +1 @@
+DELETE `brand`

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

@@ -0,0 +1,47 @@
+import {css} from "@linaria/core";
+
+export const MarkHost = css`
+    display: flex;
+    border-left-width: 4px;
+    border-color: transparent;
+    margin: 4px 0;
+`;
+
+export const MarkLine = css`
+    flex: 1 1 0%;
+`;
+
+export const MarkAnnotated = css`
+    border-color: #60A5FA;
+    background-color: #EEF2FF;
+`;
+
+export const LineNumberHost = css`
+    margin: 0 12px 0px 4px;
+    //text-align: right;
+    user-select: none;
+    opacity: 0.5;
+`;
+
+export const CodeHost = 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;
+`;
+
+export const CodeHostFull = css`
+    max-height: 100%;   
+`;

package/src/coder/Code/Code.tsx

@@ -0,0 +1,76 @@
+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 * as cn from "./Code.styles";
+import {CodeLoader} from "./CodeLoader";
+
+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 LineNumber(props: any) {
+    if (!props.children || !props.children.length) {
+        return null
+    }
+    return (
+        <>
+        <span
+            style={{minWidth: `${props.width}ch`}}
+            className={cn.LineNumberHost}
+        >
+          {props.lineNumber}
+        </span>
+            <InnerLine merge={props}/>
+        </>
+    )
+}
+
+// TODO: fix any
+Code.Mark = function Mark(props: any) {
+    return <div className={`${cn.MarkHost} ${props.annotation && cn.MarkAnnotated}`}>
+        <InnerLine
+            merge={props}
+            className={cn.MarkLine}
+        />
+    </div>
+}
+
+// TODO: fix any
+Code.Bg = function CodeLine(props: any) {
+    return <span className={`${props.annotation && cn.MarkAnnotated}`}>
+        {props.children}
+    </span>
+}
+
+Code.Pre = function CodePre(props: {
+                                codeblock: HighlightedCode,
+                                size?: "full",
+                                handlers: AnnotationHandler[],
+                                className?: 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}
+    />
+}

package/src/coder/Code/CodeLoader.tsx

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

package/src/coder/Code/annotations.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {AnnotationHandler} from "codehike/code";
+
+import {Code} from "./Code";
+
+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,15 @@
+export {
+    annotations
+} from "./annotations"
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code,
+} from "./Code"
+export {
+    CodeLoader,
+} from "./CodeLoader"
+export {
+    highlight
+} from "./highlight"

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

@@ -0,0 +1,19 @@
+import {css} from "@linaria/core";
+
+export const CodeCopyHost = css`
+    all: unset;
+    
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    border-radius: 6px;
+    padding: 6px;
+
+    &:hover {
+        transition: ease-in 0.1s;
+        background: #e3e3eb;
+    }
+`; 

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
@@ -24,7 +22,7 @@ export function CodeCopy({text}: CodeCopyProps) {
         <button
             aria-label="Copy to clipboard"
             onClick={onClick}
-            className={$copy.host}
+            className={cn.CodeCopyHost}
         >
             {copied ? <CheckCheck size={16}/> : <Copy size={16}/>}
         </button>