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

package/src/coder/CodeSample/CodeSample.tsx

@@ -17,6 +17,7 @@ export interface CodeSampleProps {
     description: string;
     codeblocks: CodeThemeBlockProps[];
     size?: "full"
+    kind?: "secondary"
     theme?: Theme
 }
 
@@ -29,6 +30,17 @@ export function CodeSample(props: CodeSampleProps) {
 function $ThemedCodeSample(props: CodeSampleProps) {
     const {highlighted} = useCodeTheme()
 
+    if (props.kind === "secondary") {
+        return <Code.Pre
+            codeblock={highlighted[0]}
+            handlers={[
+                annotations.mark,
+                annotations.bg,
+                annotations.lineNumbers
+            ]}
+        />
+    }
+
     return <$CodeSampleTabs
         description={props.description}
         highlighted={highlighted}

package/src/coder/CodeTabs/CodeTabs.styles.tsx

@@ -1,89 +1,104 @@
 import {css} from "@linaria/core";
 
-export const $sample = {
-    host: css`
-        overflow: hidden;
-        min-width: 0;
-        //flex: 1 1 0;
-        //max-width: 512px;
-
-        border: 1px solid rgb(236, 236, 241);
-        border-radius: 16px;
-    `,
-}
-
-export const $languages = {
-    host: css`
-        display: flex;
-        flex: 1 1 0%;
-        //padding: 8px 0px;
-
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
-        
-        border-top-right-radius: 10px;
-        border-top-left-radius: 10px;
-        border-bottom: 0px;
-
-        min-width: 0;
-    `,
-    list: css`
-        display: flex;
-        flex-grow: 1;
-        justify-content: end;
-        gap: 8px;
-        padding: 0 10px;
-    `,
-    button: css`
-        all: unset;
-
-        cursor: pointer;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        border-radius: 6px;
-        padding: 6px;
-
-        font-size: 14px;
-        color: rgb(53, 55, 64);
-        
-        &[data-state="active"] {
-            color: rgb(112, 81, 212);
-            border-bottom: 1px solid rgb(112, 81, 212);
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-        
-        &:hover {
-            transition: ease-in 0.1s;
-            background: #e3e3eb;
-        }
-    `,
-    description: css`
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        font-size: 14px;
-        color: rgb(53, 55, 64);
-        
-        margin-left: 4px;
-        margin-right: 4px;
-    `,
-    description$item: css`
-        display: flex;
-        padding-left: 16px;
-        padding-right: 16px;
-        flex: 1 1 0%;
-        gap: 16px;
-        border-radius: 4px;
-    `,
-    copy: css`
-        display: flex;
-        padding-left: 8px;
-        padding-right: 8px;
-        align-items: center;
-    `
-}
+export const CodeTabsHost = css`
+    overflow: hidden;
+    min-width: 0;
+    //flex: 1 1 0;
+    //max-width: 512px;
+
+    border: 1px solid rgb(236, 236, 241);
+    border-radius: 16px;
+`;
+
+export const CodeTabsPreSingle = css`
+    border: none !important; // TODO: bad, find another way - CodeSample another kind?
+`;
+
+export const CodeTabsLanguagesHost = css`
+    display: flex;
+    flex: 1 1 0%;
+    //padding: 8px 0px;
+
+    background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%) !important;
+    
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-bottom: 0px;
+
+    min-width: 0;
+`;
+
+export const CodeTabsLanguagesHostSingle = css`
+    height: 0;
+`;
+
+export const CodeTabsLanguagesList = css`
+    display: flex;
+    flex-grow: 1;
+    justify-content: end;
+    gap: 8px;
+    padding: 0 10px;
+`;
+
+export const CodeTabsLanguagesButton = css`
+    all: unset;
+
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 6px;
+    padding: 6px;
+
+    font-size: 14px;
+    color: rgb(53, 55, 64);
+    
+    &[data-state="active"] {
+        color: rgb(112, 81, 212);
+        border-bottom: 1px solid rgb(112, 81, 212);
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+    }
+    
+    &:hover {
+        transition: ease-in 0.1s;
+        background: #e3e3eb;
+    }
+`;
+
+export const CodeTabsLanguagesDescription = css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    font-size: 14px;
+    color: rgb(53, 55, 64);
+    
+    margin-left: 4px;
+    margin-right: 4px;
+`;
+
+export const CodeTabsLanguagesDescriptionItem = css`
+    display: flex;
+    padding-left: 16px;
+    padding-right: 16px;
+    flex: 1 1 0%;
+    gap: 16px;
+    border-radius: 4px;
+`;
+
+export const CodeTabsLanguagesCopy = css`
+    display: flex;
+    padding-left: 8px;
+    padding-right: 8px;
+    align-items: center;
+`;
+
+export const CodeTabsLanguagesCopySingle = css`
+    top: 17px;
+    position: relative;
+    right: 5px;
+`;
 

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -7,10 +7,7 @@ import {
 import {
     CodeCopy,
 } from "../CodeCopy";
-import {
-    $sample,
-    $languages,
-} from "./CodeTabs.styles.tsx"; // TODO: style by highlighted?
+import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
 
 export interface CodeTabsProps {
     description: string;
@@ -20,9 +17,11 @@ export interface CodeTabsProps {
 
 export function withCodeTabs(PreComponent) {
     return function CodeTabs(props: CodeTabsProps) {
+        const isSingle = props.highlighted.length === 1 && !props.description
+
         return (
             <TabsPrimitive.Root
-                className={$sample.host}
+                className={cn.CodeTabsHost}
                 style={props.highlighted[0]?.style}
                 defaultValue={props.highlighted[0]?.meta}
             >
@@ -36,6 +35,9 @@ export function withCodeTabs(PreComponent) {
                         <PreComponent
                             style={codeblock?.style || codeblock?.style}
                             codeblock={codeblock}
+                            className={`
+                                ${isSingle && cn.CodeTabsPreSingle}
+                            `}
                         />
                     </TabsPrimitive.Content>
                 ))}
@@ -50,18 +52,29 @@ interface LanguageTabSwitcherProps {
 }
 
 function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
-    return <div className={$languages.host}>
+    const isSingle = props.highlighted.length === 1 && !props.description
+
+    return <div className={`
+        ${cn.CodeTabsLanguagesHost}
+        ${isSingle && cn.CodeTabsLanguagesHostSingle}
+    `}>
         <$Description description={props.description}/>
 
-        <TabsPrimitive.List className={$languages.list}>
-            {props.highlighted?.map(({meta}, i) => (
-                <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
+        <TabsPrimitive.List className={cn.CodeTabsLanguagesList}>
+            {props.highlighted?.map(({meta}, i) => {
+                if (isSingle) {
+                    return null
+                }
+                return <TabsPrimitive.Trigger value={meta!} key={i} className={cn.CodeTabsLanguagesButton}>
                     {meta}
                 </TabsPrimitive.Trigger>
-            ))}
+            })}
         </TabsPrimitive.List>
 
-        <div className={$languages.copy}>
+        <div className={`
+            ${cn.CodeTabsLanguagesCopy}
+            ${isSingle && cn.CodeTabsLanguagesCopySingle}
+        `}>
             {props.highlighted?.map((codeblock, i) => (
                 <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
                     <CodeCopy text={codeblock.value}/>
@@ -72,8 +85,8 @@ function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
 }
 
 function $Description(props: { description: string }) {
-    return <div className={$languages.description}>
-        <div className={$languages.description$item}>
+    return <div className={cn.CodeTabsLanguagesDescription}>
+        <div className={cn.CodeTabsLanguagesDescriptionItem}>
             {props.description}
         </div>
     </div>

package/src/coder/CodeTheme/CodeTheme.tsx

@@ -4,6 +4,7 @@ import { highlight } from "codehike/code";
 import type { HighlightedCode } from "codehike/code";
 
 import defaultTheme from "../themes/cosmo-light"
+import { Loader } from "../../ui";
 
 export interface CodeThemeProps {
   codeblocks: CodeThemeBlockProps[];
@@ -57,7 +58,7 @@ export function CodeThemeCSR(props: CodeThemeProps) {
   }, [props.codeblocks, props.theme]);
 
   if (!highlighted) {
-    return <div>loading${`...`}</div>;
+    return <Loader />;
   }
 
   return (

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/Anchor/Anchor.styles.tsx

@@ -0,0 +1,5 @@
+import {css} from "@linaria/core";
+
+export const AnchorHost = css`
+    color: #7051d4;
+`; 

package/src/content/Anchor/Anchor.tsx

@@ -1,13 +1,6 @@
 import React, {forwardRef} from 'react'
 import type {ComponentProps, ReactElement} from 'react'
-
-import {css} from "@linaria/core";
-
-const $anchor = {
-    host: css`
-        color: #7051d4;
-    `,
-};
+import * as cn from "./Anchor.styles";
 
 export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
     newWindow?: boolean
@@ -24,11 +17,10 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
         return (
             <a
                 ref={forwardedRef}
-                to={href}
                 href={href}
                 target="_blank"
                 rel="noreferrer"
-                className={$anchor.host}
+                className={cn.AnchorHost}
             >
                 {children}
             </a>
@@ -39,9 +31,8 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
         return (
             <a
                 ref={forwardedRef}
-                to={href}
                 href={href}
-                className={$anchor.host}
+                className={cn.AnchorHost}
             >
                 {children}
             </a>
@@ -51,9 +42,8 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
     return (
         <a
             ref={forwardedRef}
-            to={href}
             href={href}
-            className={$anchor.host}
+            className={cn.AnchorHost}
         >
             {children}
         </a>

package/src/content/Content/Content.styles.tsx

@@ -0,0 +1,9 @@
+import {css} from "@linaria/core";
+
+export const ContentHost = css`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    font-size: 16px;
+    line-height: 1.5;
+`; 

package/src/content/Content/Content.tsx

@@ -1,21 +1,13 @@
 import React from "react"
-import {css} from "@linaria/core";
-
-const $content = {
-    host: css`
-        display: flex;
-        flex-direction: column;
-        //align-items: center;
-        gap: 24px;
-    `
-}
+import * as cn from "./Content.styles";
 
 export interface ContentProps {
     children: React.ReactNode
 }
 
 export function Content({children}: ContentProps) {
-    return <div className={$content.host}>
+    return <div className={cn.ContentHost}>
         {children}
     </div>
-}
+}
+

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,14 @@ 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: (props) => <TableV2.Td {...props}>
+            <TableV2.Cell>
+                {props.children}
+            </TableV2.Cell>
+        </TableV2.Td>,
 
         code: Code,
         pre: props => {
@@ -120,13 +126,14 @@ export function writerContent() {
         GuideCard,
         Steps,
         Tabs,
-        Table,
+        Table: TableV2,
         Badge,
     }
 }
 
 export function directiveContent() {
     return {
+        // TODO: deprecate?
         DirectiveCodeSample: (props) => {
             return <CodeSample
                 {...props}
@@ -161,6 +168,7 @@ export function iconContent() {
         IconReactRouter,
         IconNextJS,
         IconAppTemplate,
+        IconQuote,
     }
 }
 

package/src/content/Subtitle/Subtitle.styles.ts

@@ -0,0 +1,8 @@
+import {css} from "@linaria/core";
+
+export const Host = css`
+    margin-top: -18px;
+    font-size: 18px;
+    color: #6e6e80;
+    font-weight: 300;
+`;