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

package/src/coder/CodeTheme/CodeTheme.tsx

@@ -1,79 +1,119 @@
-import React, { createContext, useState, use, useEffect } from "react";
+import React, { createContext, useState, use, useEffect, Suspense } from "react";
 import { Theme } from "@code-hike/lighter";
 import { highlight } from "codehike/code";
 import type { HighlightedCode } from "codehike/code";
 
 import defaultTheme from "../themes/cosmo-light"
-import { Loader } from "../../ui";
+import { Loader } from "../../kit";
 
 export interface CodeThemeProps {
-  codeblocks: CodeThemeBlockProps[];
-  children: React.ReactNode;
-  theme?: Theme;
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme
+    children: React.ReactNode;
 }
 
 export interface CodeThemeBlockProps {
-  /** This is the raw code. May include annotation comments. */
-  value: string;
-  /** The programming language. */
-  lang: string;
-  /** Metadata string (the content after the language name in a markdown codeblock). */
-  meta: string;
+    /** This is the raw code. May include annotation comments. */
+    value: string;
+    /** The programming language. */
+    lang: string;
+    /** Metadata string (the content after the language name in a markdown codeblock). */
+    meta: string;
+
+    /** The highlighted code. */
+    highlighted?: HighlightedCode
 }
 
 const CodeThemeProvider = createContext<{
-  highlighted: HighlightedCode[];
+    highlighted: HighlightedCode[];
 }>({
-  highlighted: [],
+    highlighted: [],
 });
 
 export function useCodeTheme() {
-  return use(CodeThemeProvider);
+    return use(CodeThemeProvider);
 }
 
+// TODO: lazy-loading - some codeblocks on server and another on client
+// TODO: lazdy client loading only on specific codeblock
 export function CodeTheme(props: CodeThemeProps) {
-  const highlighted = use(
-    fetchHighlight(props.codeblocks, props.theme || defaultTheme)
-  );
-
-  return (
-    <CodeThemeProvider
-      value={{
-        highlighted,
-      }}
-    >
-      {props.children}
-    </CodeThemeProvider>
-  );
-}
+    // Initialize with server-side highlighted codeblocks
+    const [highlighted, setHighlighted] = useState<HighlightedCode[] | undefined>(initializeHighlighted(props.codeblocks));
+    const [clientSideFetch, setClientSideFetch] = useState(true)
 
-// `CodeThemeSync` ?
-export function CodeThemeCSR(props: CodeThemeProps) {
-  const [highlighted, setHighlighted] = useState<HighlightedCode[]>([]);
+    useEffect(() => {
+        setHighlighted(initializeHighlighted(props.codeblocks))
+    }, [props.codeblocks])
 
-  useEffect(() => {
-    fetchHighlight(props.codeblocks, props.theme || defaultTheme).then(
-      setHighlighted
-    );
-  }, [props.codeblocks, props.theme]);
+    useEffect(() => {
+        if (!props.codeblocks) {
+            return;
+        }
+
+        // Check if we need to highlight any codeblocks
+        const needsHighlighting = props.codeblocks.some(
+            codeblock => !codeblock.highlighted || !codeblock.highlighted.tokens
+        );
+
+        if (needsHighlighting) {
+            clientSideHighlight();
+        }
+    }, [props.codeblocks]);
+
+    function initializeHighlighted(codeblocks: any) {
+        if (!codeblocks) return [];
 
-  if (!highlighted) {
-    return <Loader />;
-  }
+        return codeblocks.map(codeblock => {
+            if (codeblock.highlighted && codeblock.highlighted.tokens) {
+                return {
+                    ...codeblock.highlighted,
+                    meta: codeblock.highlighted?.meta || codeblock.meta,
+                };
+            }
 
-  return (
-    <CodeThemeProvider
-      value={{
-        highlighted,
-      }}
+            return null
+        }).filter(Boolean) as HighlightedCode[]
+    }
+
+    async function clientSideHighlight() {
+        if (!props.codeblocks) {
+            return;
+        }
+
+        const allHighlighted = props.codeblocks.every(codeblock => codeblock.highlighted)
+        if (allHighlighted) {
+            return;
+        }
+        
+        const newHighlighted = await fetchHighlight(props.codeblocks, props.theme || defaultTheme);
+        setHighlighted(newHighlighted)
+
+        setClientSideFetch(false)
+    }
+
+    const withTheme = <CodeThemeProvider
+        value={{
+            highlighted: highlighted || [],
+        }}
     >
-      {props.children}
+        {props.children}
     </CodeThemeProvider>
-  );
+
+    const allHighlighted = props.codeblocks?.every(codeblock => codeblock.highlighted)
+    if (allHighlighted) {
+        return withTheme
+    }
+
+    if (clientSideFetch) {
+        return <Loader />
+    }
+
+    return withTheme
 }
 
+// TODO: own server with grammars (codehike)
 async function fetchHighlight(codeblocks: CodeThemeBlockProps[], theme: Theme) {
-  return await Promise.all(
-    codeblocks?.map((codeblock) => highlight(codeblock, theme))
-  );
+    return await Promise.all(
+        codeblocks?.map((codeblock) => highlight(codeblock, theme))
+    );
 }

package/src/coder/CodeTheme/index.ts

@@ -2,7 +2,6 @@ export type {CodeThemeProps, CodeThemeBlockProps} from "./CodeTheme";
 
 export {
     CodeTheme,
-    CodeThemeCSR,
 
     useCodeTheme
 } from "./CodeTheme";

package/src/coder/CoderProvider.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { createContext, useContext } from "react";
+
+const CoderContext = createContext<{
+    lines?: boolean
+    scroll?: boolean
+}>({
+    lines: undefined,
+    scroll: undefined,
+})
+
+
+interface CoderProviderProps {
+    children: React.ReactNode
+
+    lines?: boolean
+
+    scroll?: boolean
+}
+export function CoderProvider({ children, lines, scroll }: CoderProviderProps) {
+    return <CoderContext.Provider value={{ lines, scroll }}>{children}</CoderContext.Provider>
+}
+
+export function useCoder() {
+    return useContext(CoderContext)
+}

package/src/coder/index.ts

@@ -8,12 +8,13 @@ export {
     Code,
     CodeLoader,
 
+    highlightAsync,
     highlight
 } from "./Code"
 //
 
-export type {CodeSampleProps} from "./CodeSample";
-export {CodeSample} from "./CodeSample";
+export type { CodeSampleProps } from "./CodeSample";
+export { CodeSample } from "./CodeSample";
 //
 
 export type {
@@ -24,10 +25,13 @@ export {
 } from "./CodeTabs";
 //
 
-export type {CodeThemeProps, CodeThemeBlockProps} from "./CodeTheme";
+export type { CodeThemeProps, CodeThemeBlockProps } from "./CodeTheme";
 export {
     CodeTheme,
-    CodeThemeCSR,
 
     useCodeTheme
 } from "./CodeTheme";
+
+export {
+    CoderProvider
+} from "./CoderProvider";

package/src/content/ContentDecoator.styles.tsx

@@ -0,0 +1,113 @@
+import { css } from "@linaria/core";
+
+export default {
+    ContentDecoratorHost: css`
+        @layer components {
+            --space-small: 8px;
+            --space-medium: 16px;
+            --space-large: 20px;
+            --space-xlarge: 24px;
+            --space-xxlarge: 32px;
+            --space-2xlarge: 50px;
+
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+
+            p:not(li p):not(ul p):not(xyd-callout p):not(xyd-codetabs p):not(xyd-guidecard p):not([data-button="true"] p) {
+                margin-top: var(--space-medium);
+            }
+            
+            details {
+                --xyd-callout-bgcolor: var(--white);
+                margin-top: var(--space-medium);
+
+                summary {
+                    [part="summary-deep"], [part="summary-deep-label"] {
+                        font-size: var(--xyd-font-size-small);
+                        line-height: var(--xyd-line-height-small);
+                    }
+                    [part="summary-deep-label"] {
+                        font-weight: bold;
+                    }
+                }
+
+                &[data-kind="secondary"] {
+                    code {
+                        background: var(--xyd-details-bgcolor--secondary);
+                    }
+                }
+            }
+
+            hr {
+                margin: var(--space-xxlarge) 0;
+            }
+            
+            p {
+                display: block;
+
+                code {
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-small);
+                    margin: 0;
+                }
+            }
+            
+            h2,h3,h4,h5,h6 {
+                margin-top: var(--space-xxlarge);
+                &[data-kind="muted"] {
+                    display: block;
+                }
+            }
+            h2 {
+                margin-top: var(--space-2xlarge);
+            }
+            h2:first-of-type {
+                margin-top: var(--space-xxlarge);
+            }
+
+            h4 {
+                &[data-kind="muted"] {
+                    margin: 4px 0 16px;
+                }
+            }
+            
+       
+            ul:not(xyd-underlinenav ul), ol:not(xyd-underlinenav ol) {
+                margin-top: var(--space-medium);
+            }
+            
+            xyd-codetabs, xyd-callout, xyd-guidecard, xyd-tabs {
+                margin: var(--space-large) 0;
+            }
+            xyd-guidecard [part="body"]  {
+                color: var(--dark48);
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-medium);
+
+                p {
+                    color: var(--dark48);
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-medium);
+                }
+            }
+            xyd-guidecard-list xyd-guidecard {
+                margin-bottom: 0;
+            }
+            xyd-tabs [part="buttons"] {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+
+            xyd-callout {
+                --xyd-font-size-medium: var(--xyd-font-size-small);
+            }
+        
+            xyd-codetabs {
+                xyd-code-pre {
+                    font-size: var(--xyd-font-size-xsmall);
+                    line-height: var(--xyd-line-height-xsmall);
+                }
+            }
+        }
+    `
+}

package/src/content/ContentDecorator.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import cn from "./ContentDecoator.styles";
+
+interface ContentDecoratorProps {
+    children: React.ReactNode
+    metaComponent?: string
+}
+
+export function ContentDecorator({ children, metaComponent }: ContentDecoratorProps) {
+    return <xyd-content-decorator
+        className={cn.ContentDecoratorHost}
+        meta-component={metaComponent || undefined}
+    >
+        {children}
+    </xyd-content-decorator>
+}

package/src/content/GridDecorator.styles.tsx

@@ -0,0 +1,67 @@
+import { css } from "@linaria/core";
+
+export default {
+    GridDecoratorHost: css`
+        @layer components {
+            display: grid;
+            gap: 1rem;
+            width: 100%;
+
+            /* First level ul - 1fr */
+            > ul {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 1rem;
+                width: 100%;
+            }
+
+            /* Nested ul - 2fr */
+            ul ul {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+                width: 100%;
+            }
+
+            &[data-cols] {
+                --cols: var(--data-cols, 2);
+                ul ul {
+                    grid-template-columns: repeat(var(--cols), 1fr);
+                }
+            }
+
+            &[data-cols="2"] { --data-cols: 2; }
+            &[data-cols="3"] { --data-cols: 3; }
+            &[data-cols="4"] { --data-cols: 4; }
+            &[data-cols="5"] { --data-cols: 5; }
+            &[data-cols="6"] { --data-cols: 6; }
+
+            @media (max-width: 768px) {
+                > ul {
+                    gap: 0;
+                }
+                ul ul {
+                    grid-template-columns: 1fr;
+                }
+            }
+
+            ul, ol, li {
+                &::before {
+                    content: none;
+                }
+            }
+
+            ul, ol {
+                display: grid;
+                margin: 0;
+                padding: 0 !important;
+                list-style: none;
+            }
+
+            li {
+                margin-left: 0 !important;
+                padding-left: 0 !important;
+            }
+        }
+    `
+}

package/src/content/GridDecorator.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import cn from "./GridDecorator.styles";
+
+interface GridDecoratorProps {
+    cols?: 2 | 3 | 4 | 5 | 6
+}
+/**
+ * A wrapper component that applies grid decoration styling to its children.
+ * This component uses a custom element `xyd-grid-decorator` to provide grid-based layout decoration.
+ * 
+ * @category Component
+ */
+export function GridDecorator({ children, cols }: GridDecoratorProps) {
+    return <xyd-grid-decorator 
+        className={cn.GridDecoratorHost}
+        data-cols={cols}
+    >
+        {children}
+    </xyd-grid-decorator>
+}