@xyd-js/components 0.1.0-dev.0

package/src/coder/CodeSample/withLocalStored.tsx

@@ -0,0 +1,50 @@
+import React, {useState, useEffect} from "react"
+
+export interface CodeTabsProps {
+    $localStorageKey: string
+    $defaultValue: string
+
+    children: React.ReactNode
+}
+
+// TODO: move to CodeTabs?
+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/coder/CodeTabs/CodeTabs.styles.tsx

@@ -0,0 +1,89 @@
+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;
+    `
+}
+

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -0,0 +1,82 @@
+import React, {} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+    HighlightedCode,
+} from "codehike/code"
+
+import {
+    CodeCopy,
+} from "../CodeCopy";
+import {
+    $sample,
+    $languages,
+} from "./CodeTabs.styles.tsx"; // TODO: style by highlighted?
+
+export interface CodeTabsProps {
+    description: string;
+    highlighted: HighlightedCode[]
+    size?: "full"
+}
+
+export function withCodeTabs(PreComponent) {
+    return function CodeTabs(props: CodeTabsProps) {
+        return (
+            <TabsPrimitive.Root
+                className={$sample.host}
+                style={props.highlighted[0]?.style}
+                defaultValue={props.highlighted[0]?.meta}
+            >
+                <$LanguageTabSwitcher
+                    description={props.description}
+                    highlighted={props.highlighted}
+                />
+
+                {props.highlighted?.map((codeblock, i) => (
+                    <TabsPrimitive.Content value={codeblock.meta} key={i}>
+                        <PreComponent
+                            style={codeblock?.style || codeblock?.style}
+                            codeblock={codeblock}
+                        />
+                    </TabsPrimitive.Content>
+                ))}
+            </TabsPrimitive.Root>
+        )
+    }
+}
+
+interface LanguageTabSwitcherProps {
+    description: string;
+    highlighted: HighlightedCode[]
+}
+
+function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
+    return <div className={$languages.host}>
+        <$Description description={props.description}/>
+
+        <TabsPrimitive.List className={$languages.list}>
+            {props.highlighted?.map(({meta}, i) => (
+                <TabsPrimitive.Trigger value={meta!} key={i} className={$languages.button}>
+                    {meta}
+                </TabsPrimitive.Trigger>
+            ))}
+        </TabsPrimitive.List>
+
+        <div className={$languages.copy}>
+            {props.highlighted?.map((codeblock, i) => (
+                <TabsPrimitive.Content value={codeblock.meta!} asChild key={i}>
+                    <CodeCopy text={codeblock.value}/>
+                </TabsPrimitive.Content>
+            ))}
+        </div>
+    </div>
+}
+
+function $Description(props: { description: string }) {
+    return <div className={$languages.description}>
+        <div className={$languages.description$item}>
+            {props.description}
+        </div>
+    </div>
+}
+
+

package/src/coder/CodeTabs/index.ts

@@ -0,0 +1,6 @@
+export type {
+    CodeTabsProps
+} from "./CodeTabs";
+export {
+    withCodeTabs
+} from "./CodeTabs";

package/src/coder/CodeTheme/CodeTheme.tsx

@@ -0,0 +1,77 @@
+import React, { createContext, useState, use, useEffect } from "react";
+import { Theme } from "@code-hike/lighter";
+import { highlight } from "codehike/code";
+import type { HighlightedCode } from "codehike/code";
+
+import { theme as defaultTheme } from "./default-theme";
+
+export interface CodeThemeProps {
+  codeblocks: CodeThemeBlockProps[];
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+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;
+}
+
+const CodeThemeProvider = createContext<{
+  highlighted: HighlightedCode[];
+}>({
+  highlighted: [],
+});
+
+export function useCodeTheme() {
+  return use(CodeThemeProvider);
+}
+
+export function CodeTheme(props: CodeThemeProps) {
+  const highlighted = use(
+    fetchHighlight(props.codeblocks, props.theme || defaultTheme)
+  );
+
+  return (
+    <CodeThemeProvider
+      value={{
+        highlighted,
+      }}
+    >
+      {props.children}
+    </CodeThemeProvider>
+  );
+}
+
+export function CodeThemeCSR(props: CodeThemeProps) {
+  const [highlighted, setHighlighted] = useState<HighlightedCode[]>([]);
+
+  useEffect(() => {
+    fetchHighlight(props.codeblocks, props.theme || defaultTheme).then(
+      setHighlighted
+    );
+  }, [props.codeblocks, props.theme]);
+
+  if (!highlighted) {
+    return <div>loading...</div>;
+  }
+
+  return (
+    <CodeThemeProvider
+      value={{
+        highlighted,
+      }}
+    >
+      {props.children}
+    </CodeThemeProvider>
+  );
+}
+
+async function fetchHighlight(codeblocks: CodeThemeBlockProps[], theme: Theme) {
+  return await Promise.all(
+    codeblocks?.map((codeblock) => highlight(codeblock, theme))
+  );
+}

package/src/coder/CodeTheme/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/CodeTheme/index.ts

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

package/src/coder/README.md

@@ -0,0 +1 @@
+# @xyd-js/components/coder

package/src/coder/index.ts

@@ -0,0 +1,29 @@
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code
+} from "./Code"
+export {
+    annotations
+} from "./Code"
+//
+
+export type {CodeSampleProps} from "./CodeSample";
+export {CodeSample} from "./CodeSample";
+
+//
+export type {
+    CodeTabsProps
+} from "./CodeTabs";
+export {
+    withCodeTabs
+} from "./CodeTabs";
+
+//
+export type {CodeThemeProps, CodeThemeBlockProps} from "./CodeTheme";
+export {
+    CodeTheme,
+    CodeThemeCSR,
+    useCodeTheme
+} from "./CodeTheme";

package/src/content/Anchor/Anchor.tsx

@@ -0,0 +1,63 @@
+import React, {forwardRef} from 'react'
+import type {ComponentProps, ReactElement} from 'react'
+
+import {css} from "@linaria/core";
+
+const $anchor = {
+    host: css`
+        color: #7051d4;
+    `,
+};
+
+export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
+    newWindow?: boolean
+}
+
+// TODO: where react-router?
+
+export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
+    {href = '', children, newWindow},
+    // ref is used in <NavbarMenu />
+    forwardedRef
+): ReactElement {
+    if (newWindow) {
+        return (
+            <a
+                ref={forwardedRef}
+                to={href}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className={$anchor.host}
+            >
+                {children}
+            </a>
+        )
+    }
+
+    if (!href) {
+        return (
+            <a
+                ref={forwardedRef}
+                to={href}
+                href={href}
+                className={$anchor.host}
+            >
+                {children}
+            </a>
+        )
+    }
+
+    return (
+        <a
+            ref={forwardedRef}
+            to={href}
+            href={href}
+            className={$anchor.host}
+        >
+            {children}
+        </a>
+    )
+})
+
+Anchor.displayName = 'Anchor'

package/src/content/Anchor/index.tsx

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