@xyd-js/atlas 0.1.0-xyd.15 → 0.1.0-xyd.18

package/packages/atlas-index/AtlasIndex.tsx

@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import type {Reference} from "@xyd-js/uniform";
-import {
-    Heading,
-    TableV2,
-    Details,
-    Code,
-
-    IconQuote
-} from "@xyd-js/components/writer";
-import {
-    helperContent
-} from "@xyd-js/components/content";
-
-import {MDXReference, mdxValue} from "@/utils/mdx";
-
-const {Content} = helperContent()
-
-// TODO: interface should be imported from somewhere
-interface CodeSourceContext {
-    fileName: string;
-    fileFullPath: string;
-    sourcecode: string;
-}
-
-interface AtlasIndexProps {
-    data: MDXReference<Reference<CodeSourceContext>>
-}
-
-export function AtlasIndex({data}: AtlasIndexProps) {
-    return <Content>
-        <Heading size={1}>
-            {mdxValue(data.title)}
-        </Heading>
-
-        <p>
-            {data.description.children}
-        </p>
-
-        {
-            mdxValue(data.context?.fileName) && <Details
-                label=""
-                kind="tertiary"
-                title={<>
-                    Source code in <Code>{mdxValue(data.context.fileFullPath)}</Code>
-                </>}
-                icon={<IconQuote/>}>
-                {data.context.sourcecode.children}
-            </Details>
-        }
-
-        {
-            data.definitions.map((definition, index) => {
-                return <>
-                    <Heading size={2}>
-                        {mdxValue(definition.title)}
-                    </Heading>
-                    <TableV2 key={index}>
-                        <TableV2.Head>
-                            <TableV2.Tr>
-                                <TableV2.Th>Type</TableV2.Th>
-                                <TableV2.Th>Description</TableV2.Th>
-                            </TableV2.Tr>
-                        </TableV2.Head>
-                        {definition.properties?.map((property, propIndex) => (
-                            <TableV2.Tr key={propIndex}>
-                                <TableV2.Td>
-                                    <Code>{mdxValue(property.name) || mdxValue(property.type)}</Code>
-                                </TableV2.Td>
-                                <TableV2.Td muted>{property?.children}</TableV2.Td>
-                            </TableV2.Tr>
-                        ))}
-                    </TableV2>
-                </>
-            })
-        }
-    </Content>
-}

package/packages/atlas-index/index.ts

@@ -1,3 +0,0 @@
-export {
-    AtlasIndex
-} from "./AtlasIndex"

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

@@ -1,17 +0,0 @@
-import {css} from "@linaria/core";
-
-export const CodeCopyHost = css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: 8px;
-
-    border-radius: 6px;
-
-    cursor: pointer;
-
-    &:hover {
-        background: var(--XydAtlas-Component-Code-Copy__color-background--active);
-    }
-`; 

package/src/components/Code/CodeCopy/CodeCopy.tsx

@@ -1,30 +0,0 @@
-import React, {useState} from "react"
-import {Copy, CopyCheck, CheckCheck} from "lucide-react"
-
-import * as cn from "./CodeCopy.styles"
-
-export interface CodeCopyProps {
-    text: string
-}
-
-export function CodeCopy({text}: CodeCopyProps) {
-    const [copied, setCopied] = useState(false)
-
-    function onClick() {
-        navigator.clipboard.writeText(text)
-        setCopied(true)
-        setTimeout(() => {
-            setCopied(false)
-        }, 1200)
-    }
-
-    return (
-        <button
-            aria-label="Copy to clipboard"
-            onClick={onClick}
-            className={cn.CodeCopyHost}
-        >
-            {copied ? <CheckCheck size={16}/> : <Copy size={16}/>}
-        </button>
-    )
-}

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

@@ -1,7 +0,0 @@
-export {
-    CodeCopy
-} from "./CodeCopy"
-
-export type {
-    CodeCopyProps
-} from "./CodeCopy"

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

@@ -1,131 +0,0 @@
-import {css} from "@linaria/core";
-
-export const CodeSampleHost = css`
-    flex: 1 1 0;
-    overflow: hidden;
-    min-width: 0;
-    max-width: 512px;
-
-    border: 1px solid var(--XydAtlas-Component-Code-Sample__color-border);
-    border-radius: 16px;
-`;
-
-export const CodeSampleLanguagesHost = 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 CodeSampleLanguagesList = css`
-    display: flex;
-    flex-grow: 1;
-    justify-content: end;
-    gap: 8px;
-    padding: 0 10px;
-`;
-
-export const CodeSampleLanguagesButton = css`
-    all: unset;
-
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 6px;
-    padding: 6px;
-
-    font-size: 14px;
-    color: var(--XydAtlas-Component-Code-Sample__color);
-
-    &[data-state="active"] {
-        color: var(--XydAtlas-Component-Code-Sample__color--active);
-        border-bottom: 1px solid var(--XydAtlas-Component-Code-Sample__color--active);
-        border-bottom-left-radius: 0px;
-        border-bottom-right-radius: 0px;
-    }
-
-    &:hover {
-        transition: ease-in 0.1s;
-        background: var(--XydAtlas-Component-Code-Sample__color-background);
-    }
-`;
-
-export const CodeSampleLanguagesDescription = css`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    font-size: 14px;
-    color: var(--XydAtlas-Component-Code-Sample__color);
-
-    margin-left: 4px;
-    margin-right: 4px;
-`;
-
-export const CodeSampleLanguagesDescriptionItem = css`
-    display: flex;
-    padding-left: 16px;
-    padding-right: 16px;
-    flex: 1 1 0%;
-    gap: 16px;
-    border-radius: 4px;
-`;
-
-export const CodeSampleLanguagesCopy = css`
-    display: flex;
-    padding-left: 8px;
-    padding-right: 8px;
-    align-items: center;
-`;
-
-export const CodeSampleCodeHost = 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(--XydAtlas-Component-Code-Sample__color-border);
-    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 CodeSampleMarkHost = css`
-    display: flex;
-    border-left-width: 4px;
-    border-color: transparent;
-    margin: 4px 0;
-`;
-
-export const CodeSampleMarkLine = css`
-    flex: 1 1 0%;
-`;
-
-export const CodeSampleMarkAnnotated = css`
-    border-color: var(--XydAtlas-Component-Code-Sample__color-markBorder--active);
-    background-color: var(--XydAtlas-Component-Code-Sample__color-markBackground--active);
-`;
-
-export const CodeSampleLineNumberHost = css`
-    margin: 0 4px;
-    //text-align: right;
-    user-select: none;
-    opacity: 0.5;
-`;

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

@@ -1,143 +0,0 @@
-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 * as cn from "./CodeSample.styles";
-import {CodeLoader} from "@xyd-js/components/coder";
-
-// 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 <CodeLoader/>
-    }
-
-    if (!highlighted) {
-        return <CodeLoader/>
-    }
-
-    return (
-        <$$LocalStoredTab
-            className={cn.CodeSampleHost}
-            style={highlighted[0]?.style}
-            localStorageKey={`preferredLanguage[${name}]`}
-            defaultValue={highlighted[0]?.meta}
-        >
-            <div className={cn.CodeSampleLanguagesHost}>
-                <$Description description={props.description}/>
-
-                <TabsPrimitive.List className={cn.CodeSampleLanguagesList}>
-                    {props.codeblocks?.map(({meta}, i) => (
-                        <TabsPrimitive.Trigger value={meta!} key={i} className={cn.CodeSampleLanguagesButton}>
-                            {meta}
-                        </TabsPrimitive.Trigger>
-                    ))}
-                </TabsPrimitive.List>
-
-                <div className={cn.CodeSampleLanguagesCopy}>
-                    {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={cn.CodeSampleCodeHost}
-                        style={codeblock?.style || codeblock?.style}
-                        code={codeblock}
-                        handlers={[mark, lineNumber]}
-                    />
-                </TabsPrimitive.Content>
-            ))}
-        </$$LocalStoredTab>
-    )
-}
-
-function $Description(props: { description: string }) {
-    return <div className={cn.CodeSampleLanguagesDescription}>
-        <div className={cn.CodeSampleLanguagesDescriptionItem}>
-            {props.description}
-        </div>
-    </div>
-}
-
-const mark: AnnotationHandler = {
-    name: "Mark",
-    Line: ({annotation, ...props}) => {
-        return (
-            <div className={`${cn.CodeSampleMarkHost} ${annotation && cn.CodeSampleMarkAnnotated}`}>
-                <InnerLine
-                    merge={props}
-                    className={cn.CodeSampleMarkLine}
-                />
-            </div>
-        )
-    },
-}
-
-const lineNumber: AnnotationHandler = {
-    name: "LineNumber",
-    Line: ({annotation, ...props}) => {
-        const width = props.totalLines.toString().length + 1
-
-        return (
-            <>
-        <span
-            style={{minWidth: `${width}ch`}}
-            className={cn.CodeSampleLineNumberHost}
-        >
-          {props.lineNumber}
-        </span>
-                <InnerLine merge={props}/>
-            </>
-        )
-    },
-}
-

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

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

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

@@ -1,52 +0,0 @@
-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>
-        )
-    }
-}