@uipath/apollo-wind 2.67.1 → 2.69.0

package/dist/components/ui/code-block.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface CodeBlockStrings {
+    /** Label of the copy button. */
+    copy: string;
+    /** Tooltip and status announcement right after a successful copy. */
+    copied: string;
+    /** Header label when no `language` is given. */
+    plainText: string;
+}
+export declare const DEFAULT_CODE_BLOCK_STRINGS: CodeBlockStrings;
+export interface CodeBlockHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The source the copy button writes to the clipboard. */
+    code: string;
+    /** Shown as the label. Falls back to `strings.plainText`. */
+    language?: string;
+    strings?: Partial<CodeBlockStrings>;
+}
+/** The label row with the copy button. Extra actions passed as `children` sit before the copy. */
+declare const CodeBlockHeader: React.ForwardRefExoticComponent<CodeBlockHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The source to show. A single trailing newline is dropped. */
+    code: string;
+    /**
+     * Prism language name or common alias (`ts`, `js`, `sh`, `py`, `yml`, `html`, ...). Unknown or
+     * missing languages render as plain text; the header still shows what was passed.
+     */
+    language?: string;
+    /** Wrap long lines instead of scrolling horizontally. */
+    wrap?: boolean;
+    showLineNumbers?: boolean;
+    /** Hide the label and copy row, e.g. for a one-line snippet. */
+    hideHeader?: boolean;
+    /** Extra header actions, such as preview or expand, placed before the copy button. */
+    actions?: React.ReactNode;
+    strings?: Partial<CodeBlockStrings>;
+}
+declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
+export { CodeBlock, CodeBlockHeader };

package/dist/components/ui/code-block.js

@@ -0,0 +1,307 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { forwardRef, memo, useEffect, useRef, useState } from "react";
+import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash.js";
+import csharp from "react-syntax-highlighter/dist/esm/languages/prism/csharp.js";
+import css from "react-syntax-highlighter/dist/esm/languages/prism/css.js";
+import diff from "react-syntax-highlighter/dist/esm/languages/prism/diff.js";
+import go from "react-syntax-highlighter/dist/esm/languages/prism/go.js";
+import java from "react-syntax-highlighter/dist/esm/languages/prism/java.js";
+import javascript from "react-syntax-highlighter/dist/esm/languages/prism/javascript.js";
+import json from "react-syntax-highlighter/dist/esm/languages/prism/json.js";
+import prism_jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx.js";
+import markdown from "react-syntax-highlighter/dist/esm/languages/prism/markdown.js";
+import markup from "react-syntax-highlighter/dist/esm/languages/prism/markup.js";
+import powershell from "react-syntax-highlighter/dist/esm/languages/prism/powershell.js";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python.js";
+import sql from "react-syntax-highlighter/dist/esm/languages/prism/sql.js";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx.js";
+import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript.js";
+import vbnet from "react-syntax-highlighter/dist/esm/languages/prism/vbnet.js";
+import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml.js";
+import prism_light from "react-syntax-highlighter/dist/esm/prism-light.js";
+import { Button } from "./button.js";
+import { cn } from "../../lib/index.js";
+import { copyTextToClipboard } from "../../lib/clipboard.js";
+const LANGUAGES = {
+    bash: bash,
+    csharp: csharp,
+    css: css,
+    diff: diff,
+    go: go,
+    java: java,
+    javascript: javascript,
+    json: json,
+    jsx: prism_jsx,
+    markdown: markdown,
+    markup: markup,
+    powershell: powershell,
+    python: python,
+    sql: sql,
+    tsx: tsx,
+    typescript: typescript,
+    vbnet: vbnet,
+    yaml: yaml
+};
+for (const [name, grammar] of Object.entries(LANGUAGES))prism_light.registerLanguage(name, grammar);
+const LANGUAGE_ALIASES = {
+    'c#': 'csharp',
+    cjs: "javascript",
+    cs: 'csharp',
+    golang: 'go',
+    htm: 'markup',
+    html: 'markup',
+    js: "javascript",
+    md: 'markdown',
+    mjs: "javascript",
+    patch: 'diff',
+    ps: 'powershell',
+    ps1: 'powershell',
+    pwsh: 'powershell',
+    py: 'python',
+    sh: 'bash',
+    shell: 'bash',
+    svg: 'markup',
+    ts: "typescript",
+    vb: 'vbnet',
+    'vb.net': 'vbnet',
+    xml: 'markup',
+    yml: 'yaml',
+    zsh: 'bash'
+};
+function resolveLanguage(language) {
+    const key = language?.trim().toLowerCase();
+    if (!key) return;
+    const name = LANGUAGE_ALIASES[key] ?? key;
+    return name in LANGUAGES ? name : void 0;
+}
+const token = (name)=>`var(--code-${name}, var(--foreground))`;
+const codeBlockTheme = {
+    'code[class*="language-"]': {
+        color: token('rest'),
+        background: 'none',
+        fontFamily: 'var(--font-mono)',
+        textAlign: 'left',
+        wordSpacing: 'normal',
+        wordBreak: 'normal',
+        tabSize: 2,
+        hyphens: 'none'
+    },
+    'pre[class*="language-"]': {
+        color: token('rest'),
+        background: 'none',
+        fontFamily: 'var(--font-mono)',
+        fontSize: '0.8125rem',
+        lineHeight: 1.6,
+        margin: 0,
+        padding: '0.75rem 1rem',
+        overflow: 'auto',
+        tabSize: 2
+    },
+    comment: {
+        color: 'var(--foreground-muted)',
+        fontStyle: 'italic'
+    },
+    prolog: {
+        color: 'var(--foreground-muted)',
+        fontStyle: 'italic'
+    },
+    doctype: {
+        color: 'var(--foreground-muted)'
+    },
+    cdata: {
+        color: 'var(--foreground-muted)'
+    },
+    punctuation: {
+        color: token('punctuation')
+    },
+    operator: {
+        color: token('key')
+    },
+    keyword: {
+        color: token('key')
+    },
+    atrule: {
+        color: token('key')
+    },
+    tag: {
+        color: token('key')
+    },
+    property: {
+        color: token('key')
+    },
+    'attr-name': {
+        color: token('key')
+    },
+    selector: {
+        color: token('key')
+    },
+    string: {
+        color: token('string')
+    },
+    char: {
+        color: token('string')
+    },
+    'attr-value': {
+        color: token('string')
+    },
+    'template-string': {
+        color: token('string')
+    },
+    regex: {
+        color: token('string')
+    },
+    url: {
+        color: token('string')
+    },
+    inserted: {
+        color: token('string')
+    },
+    number: {
+        color: token('number')
+    },
+    unit: {
+        color: token('number')
+    },
+    boolean: {
+        color: token('literal')
+    },
+    constant: {
+        color: token('literal')
+    },
+    symbol: {
+        color: token('literal')
+    },
+    builtin: {
+        color: token('literal')
+    },
+    'class-name': {
+        color: token('literal')
+    },
+    function: {
+        color: token('literal')
+    },
+    entity: {
+        color: token('literal')
+    },
+    deleted: {
+        color: 'var(--error, var(--destructive))'
+    },
+    important: {
+        fontWeight: 600
+    },
+    bold: {
+        fontWeight: 600
+    },
+    italic: {
+        fontStyle: 'italic'
+    }
+};
+const lineNumberStyle = {
+    minWidth: '2.25em',
+    paddingRight: '1em',
+    color: 'var(--foreground-subtle)',
+    textAlign: 'right',
+    userSelect: 'none'
+};
+const DEFAULT_CODE_BLOCK_STRINGS = {
+    copy: 'Copy code',
+    copied: 'Copied',
+    plainText: 'Text'
+};
+const COPIED_RESET_MS = 2000;
+const CodeBlockHeader = /*#__PURE__*/ forwardRef(({ code, language, strings, className, children, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_CODE_BLOCK_STRINGS,
+        ...strings
+    };
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(void 0);
+    useEffect(()=>()=>clearTimeout(timer.current), []);
+    const handleCopy = async ()=>{
+        if (!await copyTextToClipboard(code)) return;
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(()=>setCopied(false), COPIED_RESET_MS);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "code-block-header",
+        className: cn('flex items-center justify-between gap-2 border-b border-border-subtle py-1 pr-1 pl-4', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-slot": "code-block-language",
+                className: "min-w-0 truncate text-xs font-medium text-muted-foreground",
+                children: language?.trim() || text.plainText
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex shrink-0 items-center gap-1",
+                children: [
+                    children,
+                    /*#__PURE__*/ jsx(Button, {
+                        "data-slot": "code-block-copy",
+                        "data-copied": copied || void 0,
+                        variant: "ghost",
+                        size: "2xs",
+                        icon: true,
+                        "aria-label": text.copy,
+                        title: copied ? text.copied : text.copy,
+                        onClick: handleCopy,
+                        children: copied ? /*#__PURE__*/ jsx(Check, {
+                            "aria-hidden": true
+                        }) : /*#__PURE__*/ jsx(Copy, {
+                            "aria-hidden": true
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("output", {
+                        className: "sr-only",
+                        children: copied ? text.copied : ''
+                    })
+                ]
+            })
+        ]
+    });
+});
+CodeBlockHeader.displayName = 'CodeBlockHeader';
+const code_block_CodeBlockBody = /*#__PURE__*/ memo(function({ code, language, wrap, showLineNumbers }) {
+    return /*#__PURE__*/ jsx(prism_light, {
+        language: language ?? 'text',
+        style: codeBlockTheme,
+        wrapLongLines: wrap,
+        showLineNumbers: showLineNumbers,
+        lineNumberStyle: lineNumberStyle,
+        "data-slot": "code-block-body",
+        "data-wrap": wrap,
+        tabIndex: wrap ? void 0 : 0,
+        className: "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+        children: code
+    });
+});
+const CodeBlock = /*#__PURE__*/ forwardRef(({ code, language, wrap = false, showLineNumbers = false, hideHeader = false, actions, strings, className, ...props }, ref)=>{
+    const source = code.replace(/\n$/, '');
+    const resolved = resolveLanguage(language);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "code-block",
+        "data-language": resolved ?? 'text',
+        className: cn('min-w-0 overflow-hidden rounded-lg border border-border-subtle bg-surface-overlay text-foreground', className),
+        ...props,
+        children: [
+            !hideHeader && /*#__PURE__*/ jsx(CodeBlockHeader, {
+                code: source,
+                language: language,
+                strings: strings,
+                children: actions
+            }),
+            /*#__PURE__*/ jsx(code_block_CodeBlockBody, {
+                code: source,
+                language: resolved,
+                wrap: wrap,
+                showLineNumbers: showLineNumbers
+            })
+        ]
+    });
+});
+CodeBlock.displayName = 'CodeBlock';
+export { CodeBlock, CodeBlockHeader, DEFAULT_CODE_BLOCK_STRINGS };