@xyd-js/components 0.1.0-xyd.0

package/src/brand/Footer/Footer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {css} from "@linaria/core";
+
+const $footer = {
+    host: css`
+        position: relative;
+        border-top: 1px solid #f0f0f0;
+        padding: 32px;
+        background-color: #fff;
+    `,
+    container: css`
+        margin: 0 auto;
+        max-width: 1200px;
+        text-align: center;
+    `,
+    textContainer: css`
+        line-height: 24px;
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(60, 60, 67, .78);
+    `
+}
+
+export interface FooterProps {
+    children?: React.ReactNode
+}
+
+export function Footer({children}: FooterProps) {
+    return <footer className={$footer.host}>
+        <div className={$footer.container}>
+            <div className={$footer.textContainer}>
+                {children}
+            </div>
+        </div>
+    </footer>
+}

package/src/brand/Footer/index.ts

@@ -0,0 +1,3 @@
+export type {FooterProps} from "./Footer";
+
+export {Footer} from "./Footer";

package/src/brand/index.ts

@@ -0,0 +1,5 @@
+export * from "./Button"
+
+export * from "./CTABanner"
+
+export * from "./Footer"

package/src/coder/CodeCopy/CodeCopy.style.tsx

@@ -0,0 +1,21 @@
+import {css} from "@linaria/core";
+
+export const $copy = {
+    host: css`
+        all: unset;
+        
+        cursor: pointer;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        border-radius: 6px;
+        padding: 6px;
+
+        &:hover {
+            transition: ease-in 0.1s;
+            background: #e3e3eb;
+        }
+    `
+}

package/src/coder/CodeCopy/CodeCopy.tsx

@@ -0,0 +1,32 @@
+import React, {useState} from "react"
+import {Copy, CheckCheck} from "lucide-react"
+
+import {
+    $copy
+} from "./CodeCopy.style"
+
+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={$copy.host}
+        >
+            {copied ? <CheckCheck size={16}/> : <Copy size={16}/>}
+        </button>
+    )
+}

package/src/coder/CodeCopy/index.ts

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

package/src/coder/CodeSample/CodeSample.styles.tsx

@@ -0,0 +1,137 @@
+import {css} from "@linaria/core";
+
+export const $sample = {
+    host: css`
+        overflow: hidden;
+        min-width: 0;
+        //flex: 1 1 0;
+        //max-width: 512px;
+
+        border: 1px solid rgb(236, 236, 241);
+        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: rgb(53, 55, 64);
+        
+        &[data-state="active"] {
+            color: rgb(112, 81, 212);
+            border-bottom: 1px solid rgb(112, 81, 212);
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+        
+        &:hover {
+            transition: ease-in 0.1s;
+            background: #e3e3eb;
+        }
+    `,
+    description: css`
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        font-size: 14px;
+        color: rgb(53, 55, 64);
+        
+        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 rgb(236, 236, 241);
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+
+        font-size: 12px;
+        line-height: 20px;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        overflow-y: scroll;
+    `,
+    host$$full: css`
+        max-height: 100%;   
+    `
+}
+
+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: #60A5FA;
+        background-color: #EEF2FF;
+    `
+}
+
+export const $lineNumber = {
+    host: css`
+        margin: 0 4px;
+        //text-align: right;
+        user-select: none;
+        opacity: 0.5;
+    `
+}

package/src/coder/CodeSample/CodeSample.tsx

@@ -0,0 +1,150 @@
+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 "../CodeCopy";
+import {theme as defaultTheme} from "./default-theme" // TODO: support multiple themes
+import {withLocalStored} from "./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[];
+    size?: "full"
+}
+
+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 (
+        <TabsPrimitive.Root
+            className={$sample.host}
+            style={highlighted[0]?.style}
+            defaultValue={highlighted[0]?.meta}
+            // localStorageKey={`preferredLanguage[${name}]`}
+        >
+            <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}
+                            ${props?.size === "full" && $code.host$$full}
+                        `}
+                        style={codeblock?.style || codeblock?.style}
+                        code={codeblock}
+                        handlers={[mark, lineNumber]}
+                    />
+                </TabsPrimitive.Content>
+            ))}
+        </TabsPrimitive.Root>
+    )
+}
+
+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/coder/CodeSample/default-theme.ts

@@ -0,0 +1,266 @@
+// 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",
+            },
+        },
+    ],
+}

package/src/coder/CodeSample/index.ts

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