@xyd-js/atlas 0.1.0-xyd.1

package/src/components/Code/CodeSample/CodeSample.styles.tsx

@@ -0,0 +1,134 @@
+import {css} from "@linaria/core";
+
+export const $sample = {
+    host: css`
+        flex: 1 1 0;
+        overflow: hidden;
+        min-width: 0;
+        max-width: 512px;
+
+        border: 1px solid var(--atlas-comp-code-sample-border-color);
+        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: var(--atlas-comp-code-sample-color);
+
+        &[data-state="active"] {
+            color: var(--atlas-comp-code-sample-color--active);
+            border-bottom: 1px solid var(--atlas-comp-code-sample-color--active);
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        &:hover {
+            transition: ease-in 0.1s;
+            background: var(--atlas-comp-code-sample-background);
+        }
+    `,
+    description: css`
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        font-size: 14px;
+        color: var(--atlas-comp-code-sample-color);
+
+        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 $code = {
+    host: 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 var(--atlas-comp-code-sample-border-color);
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+
+        font-size: 14px;
+        line-height: 20px;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        overflow-y: scroll;
+    `
+}
+
+export const $mark = {
+    host: css`
+        display: flex;
+        border-left-width: 4px;
+        border-color: transparent;
+        margin: 4px 0;
+    `,
+    line: css`
+        flex: 1 1 0%;
+    `,
+    $$annotated: css`
+        border-color: var(--atlas-comp-code-sample-mark-border--active);
+        background-color: var(--atlas-comp-code-sample-mark-background--active);
+    `
+}
+
+export const $lineNumber = {
+    host: css`
+        margin: 0 4px;
+        //text-align: right;
+        user-select: none;
+        opacity: 0.5;
+    `
+}

package/src/components/Code/CodeSample/CodeSample.tsx

@@ -0,0 +1,149 @@
+import React, {useEffect, useState} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs"; // TODO: remove and use separation
+import {
+    AnnotationHandler,
+    InnerLine,
+    Pre,
+    highlight,
+    HighlightedCode,
+} from "codehike/code"
+
+import {
+    CodeCopy,
+} from "@/components/Code";
+import {theme as defaultTheme} from "@/components/Code/default-theme" // TODO: support multiple themes
+import {withLocalStored} from "@/components/Code/CodeSample/withLocalStored";
+import {
+    $sample,
+    $languages,
+    $code,
+    $mark,
+    $lineNumber
+} from "./CodeSample.styles";
+
+// TODO: try to use codehiki in build time / ASYNC !!! - we need rr server-components
+// TODO: separate highlight
+
+export interface MDXCodeSampleBlock {
+    /** 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;
+}
+
+export interface CodeSampleProps {
+    name: string;
+    description: string;
+    codeblocks: MDXCodeSampleBlock[];
+}
+
+const $$LocalStoredTab = withLocalStored(TabsPrimitive.Root);
+
+export function CodeSample(props: CodeSampleProps) {
+    const [highlighted, setHighlighted] = useState<HighlightedCode[]>([]);
+
+    useEffect(() => {
+        async function fetchHighlight() {
+            const result = await Promise.all(
+                props.codeblocks?.map((codeblock) => highlight(codeblock, defaultTheme))
+            );
+
+            setHighlighted(result);
+        }
+
+        fetchHighlight();
+    }, [props.codeblocks]);
+
+    if (highlighted.length === 0) {
+        return <div>Loading</div>;
+    }
+
+    if (!highlighted) {
+        return <div>Loading</div>;
+    }
+
+
+    return (
+        <$$LocalStoredTab
+            className={$sample.host}
+            style={highlighted[0]?.style}
+            localStorageKey={`preferredLanguage[${name}]`}
+            defaultValue={highlighted[0]?.meta}
+        >
+            <div className={$languages.host}>
+                <$Description description={props.description}/>
+
+                <TabsPrimitive.List className={$languages.list}>
+                    {props.codeblocks?.map(({meta}, i) => (
+                        <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
+                            {meta}
+                        </TabsPrimitive.Trigger>
+                    ))}
+                </TabsPrimitive.List>
+
+                <div className={$languages.copy}>
+                    {props.codeblocks?.map((codeblock, i) => (
+                        <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
+                            <CodeCopy text={codeblock.value}/>
+                        </TabsPrimitive.Content>
+                    ))}
+                </div>
+            </div>
+
+            {highlighted?.map((codeblock, i) => (
+                <TabsPrimitive.Content value={codeblock.meta} key={i}>
+                    <Pre
+                        className={$code.host}
+                        style={codeblock?.style || codeblock?.style}
+                        code={codeblock}
+                        handlers={[mark, lineNumber]}
+                    />
+                </TabsPrimitive.Content>
+            ))}
+        </$$LocalStoredTab>
+    )
+}
+
+function $Description(props: { description: string }) {
+    return <div className={$languages.description}>
+        <div className={$languages.description$item}>
+            {props.description}
+        </div>
+    </div>
+}
+
+const mark: AnnotationHandler = {
+    name: "Mark",
+    Line: ({annotation, ...props}) => {
+        return (
+            <div className={`${$mark.host} ${annotation && $mark.$$annotated}`}>
+                <InnerLine
+                    merge={props}
+                    className={$mark.line}
+                />
+            </div>
+        )
+    },
+}
+
+const lineNumber: AnnotationHandler = {
+    name: "LineNumber",
+    Line: ({annotation, ...props}) => {
+        const width = props.totalLines.toString().length + 1
+
+        return (
+            <>
+        <span
+            style={{minWidth: `${width}ch`}}
+            className={$lineNumber.host}
+        >
+          {props.lineNumber}
+        </span>
+                <InnerLine merge={props}/>
+            </>
+        )
+    },
+}
+

package/src/components/Code/CodeSample/index.ts

@@ -0,0 +1,8 @@
+export {
+    CodeSample,
+} from './CodeSample';
+
+export type {
+    CodeSampleProps,
+    MDXCodeSampleBlock,
+} from "./CodeSample";

package/src/components/Code/CodeSample/withLocalStored.tsx

@@ -0,0 +1,52 @@
+import React, {useState, useEffect} from "react"
+
+export interface CodeTabsProps {
+    localStorageKey: string
+    defaultValue: string
+    className: string
+    style: any
+
+    children: React.ReactNode
+}
+
+// TODO: interface
+export function withLocalStored(Component: any) {
+    return function LocalStored(props: CodeTabsProps) {
+        const [value, setValue] = useState(
+            typeof localStorage !== "undefined"
+                ? localStorage?.getItem(props.localStorageKey) || props.defaultValue
+                : props.defaultValue,
+        )
+
+        useEffect(() => {
+            const handler = (e: StorageEvent) => {
+                if (e.key === props.localStorageKey) {
+                    setValue(e.newValue || props.defaultValue)
+                }
+            }
+            window.addEventListener("storage", handler)
+            return () => {
+                window.removeEventListener("storage", handler)
+            }
+        }, [props.localStorageKey])
+
+        function onValueChange(value: string) {
+            localStorage.setItem(props.localStorageKey, value)
+            window.dispatchEvent(
+                new StorageEvent("storage", {
+                    key: props.localStorageKey,
+                    newValue: value,
+                }),
+            )
+        }
+
+        return (
+            <Component
+                onValueChange={onValueChange}
+                value={value}
+            >
+                {props.children}
+            </Component>
+        )
+    }
+}

package/src/components/Code/CodeSampleButtons/CodeSampleButtons.styles.tsx

@@ -0,0 +1,67 @@
+import {css} from "@linaria/core";
+
+export const $sample = {
+    host: css`
+        position: relative;
+        max-width: 100%;
+    `,
+    container: css`
+        display: flex;
+        align-items: center;
+        border-radius: 8px;
+        background-color: var(--atlas-comp-code-sample_buttons-container-background);
+    `
+}
+
+export const $arrow = {
+    host: css`
+        padding: 8px;
+        background-color: var(--atlas-comp-code-sample_buttons-background--active);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    `,
+    icon: css`
+        width: 16px;
+        height: 16px;
+    `
+}
+
+export const $scroller = {
+    host: css`
+        overflow-x: auto;
+        flex-grow: 1;
+    `,
+    container: css`
+        display: inline-flex;
+        gap: 4px;
+
+        padding: 4px;
+        margin-left: 4px;
+    `
+}
+
+export const $button = {
+    host: css`
+        padding: 0.5rem 1rem;
+
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 500;
+        white-space: nowrap;
+
+        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 300ms;
+
+        color: var(--atlas-comp-code-sample_buttons-color);
+
+        &:hover {
+            color: var(--atlas-comp-code-sample_buttons-color--active);
+        }
+    `,
+    $$active: css`
+        color: var(--atlas-comp-code-sample_buttons-color--active);
+        background-color: var(--atlas-comp-code-sample_buttons-background--active);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    `
+}

package/src/components/Code/CodeSampleButtons/CodeSampleButtons.tsx

@@ -0,0 +1,106 @@
+import React, {useState, useRef, useEffect} from 'react'
+import {ChevronLeft, ChevronRight} from "lucide-react"
+
+import {Example} from "@xyd-js/uniform";
+
+import {MDXReference, mdxValue} from "@/utils/mdx";
+
+import {
+    $sample,
+    $arrow,
+    $scroller,
+    $button
+} from "./CodeSampleButtons.styles";
+
+export interface CodeExampleButtonsProps {
+    examples: MDXReference<Example[]>
+
+    activeExample: MDXReference<Example> | null
+
+    onClick: (example: MDXReference<Example>) => void
+}
+
+export function CodeExampleButtons({examples, activeExample, onClick}: CodeExampleButtonsProps) {
+    const [showLeftArrow, setShowLeftArrow] = useState(false)
+    const [showRightArrow, setShowRightArrow] = useState(false)
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+    const handleScroll = () => {
+        if (scrollContainerRef.current) {
+            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current
+            setShowLeftArrow(scrollLeft > 0)
+            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
+        }
+    }
+
+    useEffect(() => {
+        handleScroll()
+        window.addEventListener('resize', handleScroll)
+        return () => window.removeEventListener('resize', handleScroll)
+    }, [])
+
+    const scroll = (direction: 'left' | 'right') => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = direction === 'left' ? -200 : 200
+            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})
+        }
+    }
+
+    return (
+        <div className={$sample.host}>
+            <div className={$sample.container}>
+                {showLeftArrow && (
+                    <button
+                        onClick={() => scroll('left')}
+                        className={$arrow.host}
+                    >
+                        <ChevronLeft className={$arrow.icon}/>
+                    </button>
+                )}
+                <div
+                    ref={scrollContainerRef}
+                    onScroll={handleScroll}
+                    className={$scroller.host}
+                >
+                    <div className={$scroller.container}>
+                        {examples.map((example) => (
+                            <$SampleButton
+                                key={example.codeblock.title}
+                                onClick={() => onClick(example)}
+                                example={example}
+                                activeExample={activeExample}
+                            >
+                                {mdxValue(example.codeblock.title || null)}
+                            </$SampleButton>
+                        ))}
+                    </div>
+                </div>
+                {showRightArrow && (
+                    <button
+                        onClick={() => scroll('right')}
+                        className={$arrow.host}
+                    >
+                        <ChevronRight className={$arrow.icon}/>
+                    </button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+function $SampleButton({onClick, children, activeExample, example}: {
+    onClick: () => void,
+    children: React.ReactNode,
+    example: MDXReference<Example>,
+    activeExample: MDXReference<Example> | null,
+}) {
+    const markExampleAsActive = (activeExample?.description && activeExample?.description === example?.description) ||
+        (activeExample?.codeblock?.title && activeExample?.codeblock?.title === example.codeblock.title)
+
+    return <button
+        onClick={onClick}
+        className={`${$button.host} ${markExampleAsActive && $button.$$active}`}
+    >
+        {children}
+    </button>
+}

package/src/components/Code/CodeSampleButtons/index.ts

@@ -0,0 +1,7 @@
+export {
+    CodeExampleButtons,
+} from "./CodeSampleButtons"
+
+export type {
+    CodeExampleButtonsProps
+} from "./CodeSampleButtons"