@xyd-js/components 0.1.0-xyd.6 → 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

@@ -250,7 +250,7 @@ export const $page = {
     container: css`
         padding: 40px 0;
         width: 100%;
-        max-width: 900px;
+        max-width: 965px;
         margin: 0 auto;
         font-size: 15px;
         line-height: 24px;

package/src/ui/Loader/Loader.styles.tsx

@@ -0,0 +1,52 @@
+import {css} from "@linaria/core";
+
+export const $loader = {
+    host: css`
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    `,
+    dots: css`
+        display: flex;
+        gap: 4px;
+    `,
+    dot: css`
+        width: 8px;
+        height: 8px;
+        background-color: currentColor;
+        border-radius: 50%;
+        animation: pulse 1.4s infinite ease-in-out;
+        opacity: 0.6;
+
+        &:nth-of-type(2) {
+            animation-delay: 0.2s;
+        }
+
+        &:nth-of-type(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes pulse {
+            0%, 80%, 100% { 
+                transform: scale(0.6);
+                opacity: 0.4;
+            }
+            40% { 
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+    `,
+    $$small: css`
+        .${$loader.dot} {
+            width: 6px;
+            height: 6px;
+        }
+    `,
+    $$large: css`
+        .${$loader.dot} {
+            width: 12px;
+            height: 12px;
+        }
+    `
+} 

package/src/ui/Loader/Loader.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {$loader} from "./Loader.styles.tsx";
+
+export interface LoaderProps {
+  size?: "small" | "medium" | "large";
+  className?: string;
+}
+
+export function Loader({ size = "medium", className }: LoaderProps) {
+  return (
+    <div 
+      className={`
+        ${$loader.host}
+        ${size === "small" && $loader.$$small}
+        ${size === "large" && $loader.$$large}
+        ${className}
+      `}
+    >
+      <div className={$loader.dots}>
+        <div className={$loader.dot} />
+        <div className={$loader.dot} />
+        <div className={$loader.dot} />
+      </div>
+    </div>
+  );
+} 

package/src/ui/index.ts

@@ -0,0 +1 @@
+export * from "./Loader/Loader"; 

package/src/writer/Details/Details.styles.tsx

@@ -38,6 +38,9 @@ export const $details = {
         cursor: pointer;
         padding: 20px 24px;
     `,
+    summary$$tertiary: css`
+        padding: 10px 24px;
+    `,
     summaryDeep: css`
         display: flex;
         align-items: center;
@@ -52,9 +55,19 @@ export const $details = {
         margin-left: 8px;
         font-weight: 700;
     `,
+    summaryDeep$text$$tertiary: css`
+        text-transform: none;
+        
+        code {
+            background: white;
+        }
+    `,
     label: css`
         flex: 1 1 auto;
     `,
+    label$$tertriary: css`
+        padding: 10px;
+    `,
     icon: css`
         flex: 0 0 auto;
         font-size: 16px;
@@ -72,5 +85,9 @@ export const $details = {
         code {
             background: white;
         }
+    `,
+    content$$tertiary: css`
+        background: white;
+        padding-top: 20px;
     `
 }

package/src/writer/Details/Details.tsx

@@ -5,24 +5,34 @@ import {$details} from "./Details.styles";
 interface BaseDetailsProps {
     children: React.ReactNode;
     label: string;
+
+    icon?: React.SVGProps<SVGSVGElement>;
+}
+
+interface TertiaryDetailsProps extends BaseDetailsProps {
+    kind: "tertiary";
+    title: string | React.ReactNode;
 }
 
 interface SecondaryDetailsProps extends BaseDetailsProps {
     kind: "secondary";
-    title: string;
+    title: string | React.ReactNode;
 }
 
 interface PrimaryDetailsProps extends BaseDetailsProps {
     kind?: "primary";
 }
 
-export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps;
+export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps
 
 export function Details(props: DetailsProps) {
-    let title = "";
     const {children, label} = props;
 
-    if (props.kind === "secondary") {
+    let title
+
+    const isDeepKind = ["secondary", "tertiary"].includes(props.kind || "");
+
+    if (isDeepKind && "title" in props) {
         title = props.title;
     }
 
@@ -30,23 +40,29 @@ export function Details(props: DetailsProps) {
 
     return <details className={`
         ${$details.host} 
-        ${kind === "secondary" && $details.host$$secondary}
+        ${isDeepKind && $details.host$$secondary}
    `}>
         <summary className={`
         ${$details.summary} 
-        ${kind === "secondary" && $details.summary$$secondary}
+        ${isDeepKind && $details.summary$$secondary}
+        ${kind === "tertiary" ? $details.summary$$tertiary : ""}
    `}>
             {kind === "primary" && <>
-                <$Icon/>
+                    {props.icon ? props.icon : <$Icon/>}
                 <$Label>
                     {label}
                 </$Label>
             </>}
-            {kind === "secondary" && <>
+            {isDeepKind && <>
                 <div>
                     <div className={$details.summaryDeep}>
-                        <$IconDeep/>
-                        <div className={$details.summaryDeep$text}>
+                        <>
+                            {props.icon ? props.icon : <$IconDeep/>}
+                        </>
+                        <div className={`
+                            ${$details.summaryDeep$text}
+                            ${$details.summaryDeep$text$$tertiary}
+                        `}>
                             {title}
                         </div>
                     </div>
@@ -60,7 +76,8 @@ export function Details(props: DetailsProps) {
 
         <div className={`
             ${$details.content}
-            ${kind === "secondary" && $details.content$$secondary}
+            ${isDeepKind && $details.content$$secondary}
+            ${kind === "tertiary" && $details.content$$tertiary}
         `}>
             {children}
         </div>

package/src/writer/Icon/index.tsx

@@ -339,4 +339,17 @@ export function IconAppTemplate() {
             </clipPath>
         </defs>
     </svg>
+}
+
+export function IconQuote() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+        stroke="currentColor"
+        fill="currentColor"
+    >
+        <path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3z"/>
+    </svg>
 }

package/src/writer/Table/TableV2.styles.tsx

@@ -0,0 +1,117 @@
+import {css} from "@linaria/core";
+
+const colors = {
+    primary: "#D1D5DB",
+    gray: {
+        50: "#F7F7F8",
+        100: "#ECECF1",
+        600: "#6E6E80",
+        800: "#353740",
+        900: "#202123"
+    }
+}
+
+const TableV2 = {
+    Host: css`
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    `,
+    Table: css`
+        display: table;
+        width: 100%;
+        min-width: 640px; // Ensures table doesn't get too squished
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid ${colors.gray[100]};
+        border-radius: 8px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 1rem;
+        overflow: hidden;
+    `,
+    Thead: css`
+        background: ${colors.gray[50]};
+    `,
+    Th: css`
+        text-align: left;
+        font-weight: 500;
+        padding: 0.5rem 1rem;
+        color: ${colors.gray[800]};
+        vertical-align: middle;
+        border-bottom: 1px solid ${colors.gray[100]};
+        white-space: nowrap;
+
+        &:first-child {
+            width: 24rem;
+            max-width: 40%;
+            border-right: 1px solid ${colors.gray[100]};
+
+            @media (max-width: 768px) {
+                width: auto;
+                min-width: 12rem;
+            }
+        }
+
+        &.numeric {
+            text-align: right;
+            font-weight: 400;
+            min-width: 5rem;
+            
+            @media (max-width: 768px) {
+                min-width: 4rem;
+            }
+        }
+    `,
+    Tr: css`
+        &:not(:last-child) {
+            border-bottom: 1px solid ${colors.gray[100]};
+        }
+    `,
+    Td: css`
+        padding: 0.5rem 1rem;
+        vertical-align: middle;
+        border-top: 1px solid ${colors.gray[100]};
+
+        &:first-child {
+            border-right: 1px solid ${colors.gray[100]};
+        }
+
+        &.numeric {
+            text-align: right;
+        }
+
+        &.muted {
+            color: ${colors.gray[600]};
+        }
+
+        @media (max-width: 768px) {
+            padding: 0.5rem;
+        }
+    `,
+    Cell: css`
+        display: flex;
+        align-items: baseline;
+        width: 100%;
+        gap: 0.5rem;
+    `,
+    CellContent: css`
+        flex: 1;
+        text-align: right;
+    `,
+    ModelCell: css`
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        white-space: nowrap;
+        color: ${colors.gray[900]};
+        
+        @media (max-width: 768px) {
+            font-size: 0.8125rem;
+        }
+    `
+} 
+
+export default {
+    TableV2
+}