@xyd-js/atlas 0.1.0-xyd.8 → 0.1.0-xyd.99

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,134 +0,0 @@
-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

@@ -1,149 +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 {
-    $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

@@ -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>
-        )
-    }
-}

package/src/components/Code/default-theme.ts

@@ -1,266 +0,0 @@
-// from: https://marketplace.visualstudio.com/items?itemName=smockle.xcode-default-theme
-
-import {Theme} from "@code-hike/lighter";
-
-export const theme: Theme = {
-    type: "light",
-    colors: {
-        "list.focusForeground": "#FFFFFF",
-        "scrollbar.shadow": "#ffffff00",
-        "tab.activeBorder": "#ffffff",
-        "widget.shadow": "#ffffff00",
-        "activityBar.border": "#D9D7D5",
-        "editorGroup.border": "#D9D7D5",
-        "editorGroupHeader.tabsBorder": "#D9D7D5",
-        "editorWidget.border": "#D9D7D5",
-        "editorWidget.resizeBorder": "#D9D7D5",
-        "input.border": "#D9D7D5",
-        "notificationCenter.border": "#D9D7D5",
-        "notifications.border": "#D9D7D5",
-        "panel.border": "#D9D7D5",
-        "sideBar.border": "#D9D7D5",
-        "statusBar.border": "#D9D7D5",
-        "tab.border": "#D9D7D5",
-        "activityBar.background": "#ECECEC",
-        "statusBar.background": "#ECECEC",
-        "statusBar.noFolderBackground": "#ECECEC",
-        "statusBar.debuggingBackground": "#ECECEC",
-        "editorGroupHeader.tabsBackground": "#F5F5F5",
-        "editorWidget.background": "#F5F5F5",
-        "sideBar.background": "#F5F5F5",
-        "sideBarSectionHeader.background": "#F5F5F5",
-        "tab.inactiveBackground": "#F5F5F5",
-        "activityBarBadge.background": "#282828",
-        "activityBar.foreground": "#282828",
-        "statusBar.foreground": "#565456",
-        "input.placeholderForeground": "#C7C6C5",
-        "editorLineNumber.foreground": "#A6A6A6",
-        "editorLineNumber.activeForeground": "#282828",
-        foreground: "#282828",
-        "panelTitle.activeForeground": "#282828",
-        "sideBarTitle.foreground": "#282828",
-        "sideBarSectionHeader.foreground": "#282828",
-        "panelTitle.inactiveForeground": "#242424",
-        "tab.inactiveForeground": "#242424",
-        "list.highlightForeground": "#242424",
-        "editor.lineHighlightBackground": "#EEF5FE",
-        focusBorder: "#82ADF3",
-        "button.background": "#3C93FD",
-        "list.activeSelectionBackground": "#3C93FD",
-        "list.focusBackground": "#3C93FD",
-        "selection.background": "#B3D7FF",
-        "list.inactiveSelectionBackground": "#CECECE",
-        "terminal.ansiBlack": "#000000",
-        "terminal.ansiBrightBlack": "#000000",
-        "terminal.ansiRed": "#C41A16",
-        "terminal.ansiBrightRed": "#C41A16",
-        "terminal.ansiGreen": "#007400",
-        "terminal.ansiBrightGreen": "#007400",
-        "terminal.ansiYellow": "#643820",
-        "terminal.ansiBrightYellow": "#643820",
-        "terminal.ansiBlue": "#272AD8",
-        "terminal.ansiBrightBlue": "#272AD8",
-        "terminal.ansiMagenta": "#AA0D91",
-        "terminal.ansiBrightMagenta": "#AA0D91",
-        "terminal.ansiCyan": "#3F6E74",
-        "terminal.ansiBrightCyan": "#3F6E74",
-    },
-    tokenColors: [
-        {
-            scope: "new.expr entity.name",
-            settings: {
-                foreground: "#713DA9",
-            },
-        },
-        {
-            name: "Comments",
-            scope: ["comment", "comment storage.type"],
-            settings: {
-                foreground: "#536579",
-                fontStyle: "italic",
-            },
-        },
-        {
-            name: "CSS",
-            scope: [
-                "entity.other.attribute-name.pseudo-class.css",
-                "entity.other.attribute-name.pseudo-class.scss",
-                "entity.other.attribute-name.pseudo-element.css",
-                "entity.other.attribute-name.pseudo-element.scss",
-                "support.function.calc.css",
-                "support.function.calc.scss",
-                "support.type.property-name.css",
-                "support.type.property-name.scss",
-                "support.type.vendored.property-name.css",
-                "support.type.vendored.property-name.scss",
-                "meta.property-value.css support.constant",
-                "meta.property-value.scss support.constant",
-                "meta.property-value.css support.constant.property-value",
-                "meta.property-value.scss support.constant.property-value",
-                "support.function.transform.css",
-                "support.function.transform.scss",
-            ],
-            settings: {
-                foreground: "#AA0D91",
-            },
-        },
-        {
-            name: "Decorator",
-            scope: [
-                "meta.decorator",
-                "meta.decorator punctuation.decorator",
-                "meta.decorator variable.other.readwrite",
-                "meta.decorator meta.function-call entity.name.function",
-            ],
-            settings: {
-                foreground: "#643820",
-            },
-        },
-        {
-            name: "Doctype",
-            scope: ["meta.tag.sgml.html"],
-            settings: {
-                foreground: "#A6A6A6",
-            },
-        },
-        {
-            name: "Functions",
-            scope: ["entity.name.function", "support.function"],
-            settings: {
-                foreground: "#7051d4",
-            },
-        },
-        {
-            name: "Keys",
-            scope: [
-                "meta.property-list meta.property-name",
-                "support.type.property-name",
-                "support.type.map.key",
-                "entity.name.tag.yaml",
-            ],
-            settings: {
-                foreground: "#7051d4",
-            },
-        },
-        {
-            name: "Keywords",
-            scope: [
-                "keyword.control",
-                "keyword.declaration",
-                "keyword.expressions-and-types",
-                "keyword.operator.new",
-                "keyword.reserved",
-                "keyword.statement",
-                "storage.type",
-                "storage.modifier",
-                "constant.language",
-                "variable.language.super",
-                "variable.language.this",
-                "text.html entity.name.tag",
-                "meta.tag entity.name.tag",
-                "meta.tag support.class",
-                "string.regexp keyword.other",
-            ],
-            settings: {
-                foreground: "#AD3DA4",
-                fontStyle: "bold",
-            },
-        },
-        {
-            name: "Operators",
-            scope: [
-                "storage.type.function.arrow",
-                "meta.template.expression punctuation",
-                "punctuation.separator.key-value",
-                "meta.object-literal.key meta.brace.square",
-                "meta.template.expression keyword.operator",
-                "keyword.operator.or.regexp",
-                "keyword.operator.quantifier",
-                "punctuation.definition.group.regexp",
-                "punctuation.definition.character-class",
-            ],
-            settings: {
-                foreground: "#000000",
-            },
-        },
-        {
-            scope: [
-                "meta.tag entity.other.attribute-name",
-                "constant.character.escape.backslash",
-            ],
-            settings: {
-                foreground: "#816927",
-            },
-        },
-        {
-            name: "Numbers",
-            scope: ["constant.numeric", "keyword.other.unit", "constant.other.color"],
-            settings: {
-                foreground: "#272AD8",
-            },
-        },
-        {
-            name: "Strings",
-            scope: [
-                "string",
-                "variable.parameter.url.scss",
-                "markup.heading.markdown",
-                "beginning.punctuation.definition.list.markdown",
-                "meta.template.expression meta.embedded punctuation.definition.string.begin",
-                "meta.template.expression meta.embedded punctuation.definition.string.end",
-            ],
-            settings: {
-                foreground: "#D12F1B",
-            },
-        },
-        {
-            name: "Types",
-            scope: [
-                "meta.type",
-                "meta.return.type",
-                "entity.name.type",
-                "support.type.primitive",
-            ],
-            settings: {
-                foreground: "#713DA9",
-            },
-        },
-        {
-            scope: [
-                "meta.objectliteral variable.other.object",
-                "entity.name.type.module",
-                "entity.other.inherited-class",
-                "variable.scss",
-                "variable.other.bracket.shell",
-                "entity.name.function.scss",
-            ],
-            settings: {
-                foreground: "#3F6E74",
-            },
-        },
-        {
-            scope: [
-                "keyword.control.at-rule",
-                "meta.import variable.other.readwrite",
-                "meta.definition.variable variable.other.readwrite",
-                "meta.definition.variable variable.other.constant",
-                "meta.template.expression variable.other.readwrite",
-                "meta.template.expression variable.other.constant",
-                "support.constant.property-value",
-            ],
-            settings: {
-                foreground: "#000000",
-            },
-        },
-        {
-            scope: [
-                "variable.other.property",
-                "variable.other.object.property",
-                "support.variable.property",
-            ],
-            settings: {
-                foreground: "#713DA9",
-            },
-        },
-    ],
-}