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

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,9 +5,9 @@ export type {
     CodeProps
 } from "./Code"
 export {
-    Code
-} from "./Code"
-export {
+    Code,
+    CodeLoader,
+
     highlight
 } from "./Code"
 //

package/src/content/Content.tsx

@@ -10,6 +10,7 @@ import {
     Heading,
     Hr,
     Table,
+    TableV2,
     Tabs,
     Steps,
 
@@ -28,7 +29,8 @@ import {
     IconStorybook,
     IconReactRouter,
     IconNextJS,
-    IconAppTemplate
+    IconAppTemplate,
+    IconQuote
 } from '../writer'
 import {CodeSample} from "../coder";
 
@@ -83,10 +85,15 @@ export function stdContent() {
             {props.children}
         </li>,
 
-        table: Table,
-        tr: Table.Tr,
-        th: Table.Th,
-        td: Table.Td,
+        table: TableV2,
+        tr: TableV2.Tr,
+        th: TableV2.Th,
+        td: TableV2.Td,
+        td: (props) => <TableV2.Td {...props} >
+            <TableV2.Cell>
+                {props.children}
+            </TableV2.Cell>
+        </TableV2.Td>,
 
         code: Code,
         pre: props => {
@@ -120,13 +127,14 @@ export function writerContent() {
         GuideCard,
         Steps,
         Tabs,
-        Table,
+        Table: TableV2,
         Badge,
     }
 }
 
 export function directiveContent() {
     return {
+        // TODO: deprecate?
         DirectiveCodeSample: (props) => {
             return <CodeSample
                 {...props}
@@ -161,6 +169,7 @@ export function iconContent() {
         IconReactRouter,
         IconNextJS,
         IconAppTemplate,
+        IconQuote,
     }
 }
 

package/src/content/Subtitle/Subtitle.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import {css} from "@linaria/core";
 
-const $subitlte = {
-    host: css`
+const cn = {
+    Host: css`
         margin-top: -18px;
         font-size: 18px;
-        color: #7051d4;
+        color: #6e6e80;
         font-weight: 300;
     `
 }
@@ -15,7 +15,7 @@ export interface SubtitleProps {
 }
 
 export function Subtitle({children}: SubtitleProps) {
-    return <div className={$subitlte.host}>
+    return <div className={cn.Host}>
         {children}
     </div>
 }

package/src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx

@@ -0,0 +1,320 @@
+import {css} from "@linaria/core";
+
+const globalPageGutter = '8px';
+export const globalHeaderHeight = '46px';
+const globalHeaderWarningHeight = "0px";
+const contentTopSpace = "12px";
+
+const globalHeaderHeightWithSub = '90px';
+
+const cubicMove = "cubic-bezier(.65, 0, .35, 1)";
+const sidebarWidth = "300px";
+
+// TODO: better solution - design tokens
+export const globals = css`
+    :global() {
+        :root {
+            --xyd-navbar-height: ${globalHeaderHeight};
+            --xyd-global-page-gutter: ${globalPageGutter};
+            --xyd-sidebar-width: ${sidebarWidth};
+        }
+    }
+`;
+
+export const $layout = {
+    host: css`
+        width: 100%;
+        overflow-x: hidden;
+        background: #fff;
+    `,
+    header: css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: fixed;
+        top: ${globalHeaderWarningHeight};
+        right: ${globalPageGutter};
+        left: ${globalPageGutter};
+        height: ${globalHeaderHeight};
+        z-index: 20;
+        background: #fff;
+
+        @media (max-width: 768px) {
+            padding: 0;
+        }
+    `,
+    primaryHeaderContent: css`
+        display: flex;
+        align-items: center;
+        width: 100%;
+    `,
+    header$$sub: css`
+        flex-direction: column;
+        height: ${globalHeaderHeightWithSub};
+        transition: transform 200ms;
+    `,
+    header$$hideMain: css`
+        transform: translateY(calc(-${globalHeaderHeight} + 3px));
+    `,
+    hamburgerButton: css`
+        display: none;
+
+        @media (max-width: 768px) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border: none;
+            background: none;
+            cursor: pointer;
+            padding: 0;
+        }
+    `,
+    hamburgerIcon: css`
+        width: 24px;
+        height: 24px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    `,
+    hamburgerLine: css`
+        width: 100%;
+        height: 2px;
+        background: #000;
+        transition: transform 0.3s ${cubicMove};
+    `,
+    hamburgerLine$$open: css`
+        &:first-child {
+            transform: translateY(11px) rotate(45deg);
+        }
+        &:nth-child(2) {
+            opacity: 0;
+        }
+        &:last-child {
+            transform: translateY(-11px) rotate(-45deg);
+        }
+    `,
+    main: css`
+        position: fixed;
+        display: flex;
+        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});
+        bottom: ${globalPageGutter};
+        left: ${globalPageGutter};
+        right: ${globalPageGutter};
+        margin-top: ${globalPageGutter};
+    `,
+    main$$sub: css`
+        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});
+        transition: top 200ms;
+    `,
+    staticSidebar: css`
+        flex: none;
+        width: ${sidebarWidth};
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+        
+        @media (max-width: 768px) {
+            display: none;
+        }
+    `,
+    mobileSidebar: css`
+        display: none;
+
+        @media (max-width: 768px) {
+            display: flex;
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: ${sidebarWidth};
+            background: #fff;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 50;
+            transform: translateX(-100%);
+            transition: transform .3s ${cubicMove};
+            box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
+        }
+    `,
+    mobileSidebar$$open: css`
+        transform: translateX(0);
+    `,
+    sidebarContent: css`
+        flex: 1;
+        overflow-y: auto;
+    `,
+    closeButton: css`
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: none;
+        padding: 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `,
+    searchInput: css`
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        border: 1px solid #eaeaea;
+        border-radius: 6px;
+        font-size: 14px;
+        outline: none;
+        transition: border-color 0.2s;
+
+        &:focus {
+            border-color: #666;
+        }
+    `,
+    closeIcon: css`
+        width: 20px;
+        height: 20px;
+        position: relative;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: #666;
+            transform-origin: center;
+        }
+
+        &::before {
+            transform: rotate(45deg);
+        }
+
+        &::after {
+            transform: rotate(-45deg);
+        }
+    `,
+    overlay: css`
+        display: none;
+
+        @media (max-width: 768px) {
+            display: block;
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: rgba(0, 0, 0, 0.6);
+            transition: opacity .3s;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 40;
+        }
+    `,
+    overlay$$visible: css`
+        opacity: 1;
+        pointer-events: auto;
+    `
+}
+
+export const $page = {
+    host: css`
+        position: relative;
+        top: ${contentTopSpace};
+        flex: 1;
+        background: #fff;
+        overflow: hidden;
+        min-width: 0;
+    `,
+    scroll: css`
+        overflow-y: auto;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        padding: 0 48px;
+
+        @media (max-width: 1024px) {
+            padding: 0 32px;
+        }
+
+        @media (max-width: 768px) {
+            padding: 0 24px;
+        }
+    `,
+    container: css`
+        padding: 40px 0;
+        width: 100%;
+        max-width: 965px;
+        margin: 0 auto;
+        font-size: 15px;
+        line-height: 24px;
+
+        @media (max-width: 768px) {
+            padding: 24px 0;
+        }
+    `,
+    container$$large: css`
+        max-width: 1200px;
+    `,
+    articleContainer: css`
+        width: 100%;
+        max-width: 100%;
+        margin: 0 auto;
+        box-sizing: border-box;
+    `,
+}
+
+export const $article = {
+    host: css`
+        display: flex;
+        gap: 64px;
+        width: 100%;
+        align-items: flex-start;
+        box-sizing: border-box;
+
+        @media (max-width: 1024px) {
+            gap: 48px;
+        }
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            gap: 32px;
+        }
+    `,
+    content: css`
+        flex: 1;
+        min-width: 0;
+        max-width: 100%;
+    `,
+    nav: css`
+        position: sticky;
+        top: 24px;
+        width: 200px;
+        min-width: 200px;
+        flex: none;
+        padding-left: 24px;
+
+        @media (max-width: 1024px) {
+            display: none;
+            width: 180px;
+            min-width: 180px;
+            padding-left: 16px;
+        }
+
+        @media (max-width: 768px) {
+            display: block;
+            position: static;
+            width: 100%;
+            min-width: 100%;
+            padding-left: 0;
+            padding-top: 24px;
+            border-top: 1px solid #eaeaea;
+        }
+    `
+}