@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/text/CodeBlock.js

@@ -0,0 +1,373 @@
+import { FontFamily } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "./Text.js";
+import ScrollArea from "../layout/ScrollArea.js";
+import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import CopyButton from "../buttons/CopyButton.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { createElement, forwardRef, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/text/CodeBlock.tsx
+/**
+* A read-only, multi-line code snippet: monospaced, optionally syntax-highlighted, with an
+* optional header (the language or a file name, and a copy button), optional line numbers, and a
+* diff mode that tints added and removed lines. Long lines scroll sideways; under a parent that
+* caps the height (`Box maxHeight`), the header stays put and the code scrolls.
+*
+* Highlighting is lazy and optional: the server and the first client render show the code as
+* plain text in its final layout; after mount the grammar loads (`react-syntax-highlighter`'s
+* Prism build, one chunk per language, through dynamic `import()`) and only the colors change.
+* Token colors are DLS text tokens on Prism's class names, so they follow the theme; no inline
+* style from the library reaches the DOM. If the chunk fails to load, the block stays plain.
+*
+* Editing is `CodeEditor`; inline code in a sentence is `Code`; explorable JSON is `JsonViewer`.
+*/
+/** Grammar used to highlight `content`. Values equal member names. */
+var CodeBlockLanguage = /* @__PURE__ */ function(CodeBlockLanguage) {
+	/** No highlighting. */
+	CodeBlockLanguage["PLAIN"] = "PLAIN";
+	/** Shell scripts and commands. */
+	CodeBlockLanguage["BASH"] = "BASH";
+	/** CSS. */
+	CodeBlockLanguage["CSS"] = "CSS";
+	/** Go. */
+	CodeBlockLanguage["GO"] = "GO";
+	/** GraphQL. */
+	CodeBlockLanguage["GRAPHQL"] = "GRAPHQL";
+	/** HTML (and XML / SVG markup). */
+	CodeBlockLanguage["HTML"] = "HTML";
+	/** JavaScript. */
+	CodeBlockLanguage["JAVASCRIPT"] = "JAVASCRIPT";
+	/** JSON. */
+	CodeBlockLanguage["JSON"] = "JSON";
+	/** JavaScript with JSX. */
+	CodeBlockLanguage["JSX"] = "JSX";
+	/** Markdown. */
+	CodeBlockLanguage["MARKDOWN"] = "MARKDOWN";
+	/** Protocol Buffers. */
+	CodeBlockLanguage["PROTOBUF"] = "PROTOBUF";
+	/** Python. */
+	CodeBlockLanguage["PYTHON"] = "PYTHON";
+	/** Rust. */
+	CodeBlockLanguage["RUST"] = "RUST";
+	/** SQL. */
+	CodeBlockLanguage["SQL"] = "SQL";
+	/** TOML. */
+	CodeBlockLanguage["TOML"] = "TOML";
+	/** TypeScript with JSX. */
+	CodeBlockLanguage["TSX"] = "TSX";
+	/** TypeScript. */
+	CodeBlockLanguage["TYPESCRIPT"] = "TYPESCRIPT";
+	/** YAML. */
+	CodeBlockLanguage["YAML"] = "YAML";
+	return CodeBlockLanguage;
+}({});
+/** Header text per language (the `label` default). */
+var CODE_BLOCK_LANGUAGE_TO_LABEL_MAP = {
+	["PLAIN"]: "",
+	["BASH"]: "Bash",
+	["CSS"]: "CSS",
+	["GO"]: "Go",
+	["GRAPHQL"]: "GraphQL",
+	["HTML"]: "HTML",
+	["JAVASCRIPT"]: "JavaScript",
+	["JSON"]: "JSON",
+	["JSX"]: "JSX",
+	["MARKDOWN"]: "Markdown",
+	["PROTOBUF"]: "Protobuf",
+	["PYTHON"]: "Python",
+	["RUST"]: "Rust",
+	["SQL"]: "SQL",
+	["TOML"]: "TOML",
+	["TSX"]: "TSX",
+	["TYPESCRIPT"]: "TypeScript",
+	["YAML"]: "YAML"
+};
+/**
+* Prism grammar per language, each loader a static `import()` path so bundlers split one chunk
+* per language. refractor grammars register the grammars they extend (`tsx` → `jsx`, `typescript`).
+*/
+var CODE_BLOCK_LANGUAGE_TO_GRAMMAR_MAP = {
+	["BASH"]: {
+		name: "bash",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/bash")
+	},
+	["CSS"]: {
+		name: "css",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/css")
+	},
+	["GO"]: {
+		name: "go",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/go")
+	},
+	["GRAPHQL"]: {
+		name: "graphql",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/graphql")
+	},
+	["HTML"]: {
+		name: "markup",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/markup")
+	},
+	["JAVASCRIPT"]: {
+		name: "javascript",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/javascript")
+	},
+	["JSON"]: {
+		name: "json",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/json")
+	},
+	["JSX"]: {
+		name: "jsx",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/jsx")
+	},
+	["MARKDOWN"]: {
+		name: "markdown",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/markdown")
+	},
+	["PROTOBUF"]: {
+		name: "protobuf",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/protobuf")
+	},
+	["PYTHON"]: {
+		name: "python",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/python")
+	},
+	["RUST"]: {
+		name: "rust",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/rust")
+	},
+	["SQL"]: {
+		name: "sql",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/sql")
+	},
+	["TOML"]: {
+		name: "toml",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/toml")
+	},
+	["TSX"]: {
+		name: "tsx",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/tsx")
+	},
+	["TYPESCRIPT"]: {
+		name: "typescript",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/typescript")
+	},
+	["YAML"]: {
+		name: "yaml",
+		load: () => import("react-syntax-highlighter/dist/esm/languages/prism/yaml")
+	}
+};
+/** The custom property carrying the gutter's digit count (a continuous value). */
+var GUTTER_DIGITS_VARIABLE = "--gx-code-block-gutter-digits";
+/** The 1.x code surface: tertiary fill, hairline, control radius. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-CodeBlock-r400g91",
+	propsAsIs: false
+});
+/** The header: label left, copy button 4px from the right edge, centered in 32px. */
+var HEADER_CSS = "gx-CodeBlock-HEADER_CSS-h1y08o3p";
+/**
+* The code area (ScrollArea's root) shrinks under a capped parent and scrolls. The root clips its
+* content to the rounded surface, which would also clip the scrolling viewport's outside focus
+* ring, so the ring is drawn 1px inside the viewport's edge instead (same color and width).
+*/
+var BODY_CSS = "gx-CodeBlock-BODY_CSS-bumpqda";
+var PRE_CSS = "gx-CodeBlock-PRE_CSS-p1cld4pp";
+/** Every line's background spans the widest line while scrolling sideways. */
+var CODE_CSS = "gx-CodeBlock-CODE_CSS-c1v9q63b";
+/** Prism token colors: DLS hue `default` steps, keyed by Prism's class names. */
+var TOKEN_CSS = "gx-CodeBlock-TOKEN_CSS-t9x52ij";
+/** One line: a flex row, at least one line tall (an empty line keeps its height). */
+var Line = /*#__PURE__*/ styled("span")({
+	name: "Line",
+	class: "gx-CodeBlock-Line-lzecpnt",
+	propsAsIs: false
+});
+/** The line-number gutter, as wide as the last number plus its padding (the reset makes boxes border-box). */
+var Gutter = /*#__PURE__*/ styled("span")({
+	name: "Gutter",
+	class: "gx-CodeBlock-Gutter-gj8kkfg",
+	propsAsIs: false
+});
+/** The diff marker column (`+`, `-`, space). */
+var Marker = /*#__PURE__*/ styled("span")({
+	name: "Marker",
+	class: "gx-CodeBlock-Marker-m19ulofm",
+	propsAsIs: false
+});
+var LineContent = /*#__PURE__*/ styled("span")({
+	name: "LineContent",
+	class: "gx-CodeBlock-LineContent-lni5o5",
+	propsAsIs: false
+});
+var CODE_BLOCK_DIFF_KIND_TO_CSS_MAP = {
+	["ADDED"]: "gx-CodeBlock-ADDED-a1lizgyf",
+	["REMOVED"]: "gx-CodeBlock-REMOVED-r1nfyd0u",
+	["HUNK"]: "gx-CodeBlock-HUNK-havjzuv",
+	["CONTEXT"]: "gx-CodeBlock-CONTEXT-c15du0rb"
+};
+/** Splits `content` into lines (one trailing newline dropped) and, in diff mode, their kinds. */
+function toLines(content, isDiff) {
+	return (content.endsWith("\n") ? content.slice(0, -1) : content).split("\n").map((text) => {
+		if (!isDiff) return {
+			kind: "CONTEXT",
+			marker: "",
+			code: text
+		};
+		if (text.startsWith("@@") || text.startsWith("+++") || text.startsWith("---")) return {
+			kind: "HUNK",
+			marker: "",
+			code: text
+		};
+		const marker = text.charAt(0);
+		if (marker === "+") return {
+			kind: "ADDED",
+			marker,
+			code: text.slice(1)
+		};
+		if (marker === "-") return {
+			kind: "REMOVED",
+			marker,
+			code: text.slice(1)
+		};
+		if (marker === " ") return {
+			kind: "CONTEXT",
+			marker,
+			code: text.slice(1)
+		};
+		return {
+			kind: "CONTEXT",
+			marker: "",
+			code: text
+		};
+	});
+}
+/** Token spans of one row, without the row's line break (lines are block-level here). */
+function toTokens(nodes, key) {
+	return (nodes ?? []).map((node, index) => {
+		const nodeKey = `${key}.${String(index)}`;
+		if (node.type === "text") return String(node.value ?? "").replace(/\n$/, "");
+		return createElement("span", {
+			key: nodeKey,
+			className: (node.properties?.className ?? []).map(String).join(" ")
+		}, toTokens(node.children, nodeKey));
+	});
+}
+/** The loaded highlighter, shared by every CodeBlock (filled lazily, never at module scope). */
+var prismLightPromise;
+/** Grammars already registered, per language. */
+var loadedLanguages = /* @__PURE__ */ new Map();
+/** Loads the highlighter and one grammar; resolves with the component, ready for that language. */
+function loadHighlighter(language) {
+	const cached = loadedLanguages.get(language);
+	if (cached !== void 0) return cached;
+	prismLightPromise ??= import("react-syntax-highlighter/dist/esm/prism-light").then((module) => module.default);
+	const grammar = CODE_BLOCK_LANGUAGE_TO_GRAMMAR_MAP[language];
+	const promise = Promise.all([prismLightPromise, grammar.load()]).then(([PrismLight, module]) => {
+		PrismLight.registerLanguage(grammar.name, module.default);
+		return PrismLight;
+	});
+	promise.catch(() => loadedLanguages.delete(language));
+	loadedLanguages.set(language, promise);
+	return promise;
+}
+/** `PreTag` / `CodeTag` for the highlighter: CodeBlock keeps its own `pre` and `code`. */
+function Passthrough({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+/** Read-only code with lazy syntax highlighting, copy, line numbers and diff mode. */
+var CodeBlock = forwardRef(function CodeBlock({ content, language = "PLAIN", label, canCopy = false, hasLineNumbers = false, isDiff = false, id, className, style, ...rest }, ref) {
+	const [highlighter, setHighlighter] = useState(null);
+	useEffect(() => {
+		if (language === "PLAIN") return;
+		let isCancelled = false;
+		loadHighlighter(language).then((Component) => {
+			if (!isCancelled) setHighlighter({
+				language,
+				Component
+			});
+		}, () => {});
+		return () => {
+			isCancelled = true;
+		};
+	}, [language]);
+	const lines = toLines(content, isDiff);
+	const resolvedLabel = label ?? CODE_BLOCK_LANGUAGE_TO_LABEL_MAP[language];
+	const hasHeader = resolvedLabel !== "" || canCopy;
+	const variables = { [GUTTER_DIGITS_VARIABLE]: String(String(lines.length).length) };
+	/** The lines, with token spans when `rows` (one hast row per line) are given. */
+	const renderLines = (rows) => lines.map((line, index) => {
+		const key = `l${String(index)}`;
+		const row = line.kind === "HUNK" ? void 0 : rows?.[index];
+		return /* @__PURE__ */ jsxs(Line, {
+			className: isDiff ? CODE_BLOCK_DIFF_KIND_TO_CSS_MAP[line.kind] : void 0,
+			children: [
+				hasLineNumbers && /* @__PURE__ */ jsx(Gutter, {
+					"aria-hidden": true,
+					children: index + 1
+				}),
+				isDiff && /* @__PURE__ */ jsx(Marker, { children: line.marker }),
+				/* @__PURE__ */ jsx(LineContent, { children: row === void 0 ? line.code : toTokens(row.children, key) })
+			]
+		}, key);
+	});
+	const Highlighter = highlighter !== null && highlighter.language === language ? highlighter.Component : null;
+	const grammarName = language === "PLAIN" ? "" : CODE_BLOCK_LANGUAGE_TO_GRAMMAR_MAP[language].name;
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style: {
+			...variables,
+			...style
+		},
+		children: [hasHeader && /* @__PURE__ */ jsxs("div", {
+			className: HEADER_CSS,
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				family: FontFamily.MONO,
+				size: TextSize.BODY_SM,
+				variant: TextVariant.SECONDARY,
+				lineClamp: 1,
+				children: resolvedLabel
+			}), canCopy && /* @__PURE__ */ jsx(CopyButton, {
+				value: content,
+				ariaLabel: `Copy ${resolvedLabel || "code"}`,
+				size: ButtonSize.SMALL,
+				variant: ButtonVariant.TERTIARY
+			})]
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			canScrollHorizontally: true,
+			ariaLabel: resolvedLabel || "Code",
+			className: BODY_CSS,
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				family: FontFamily.MONO,
+				size: TextSize.BODY_MD,
+				variant: TextVariant.PRIMARY,
+				isSelectable: true,
+				children: /* @__PURE__ */ jsx("pre", {
+					className: PRE_CSS,
+					children: /* @__PURE__ */ jsx("code", {
+						className: cx(CODE_CSS, TOKEN_CSS),
+						children: Highlighter === null ? renderLines(null) : /* @__PURE__ */ jsx(Highlighter, {
+							language: grammarName,
+							useInlineStyles: false,
+							wrapLines: true,
+							PreTag: Passthrough,
+							CodeTag: Passthrough,
+							renderer: ({ rows }) => renderLines(rows),
+							children: lines.map((line) => line.kind === "HUNK" ? "" : line.code).join("\n")
+						})
+					})
+				})
+			})
+		})]
+	});
+});
+CodeBlock.displayName = "CodeBlock";
+//#endregion
+export { CodeBlockLanguage, CodeBlock as default };

package/dist/text/EditableText.d.ts

@@ -1,16 +1,56 @@
-import { type TextProps } from "./Text";
-export type EditableTextProps = TextProps & {
-    /** Current text. Also the value the field resets to on cancel. */
-    label: string;
-    /** Called with the new text when the edit is committed. */
-    onSave: (text: string) => void;
-};
-/**
- * Click-to-edit text. Renders as `Text` until clicked, then swaps to an inline
- * input. Accepts every `TextProps` styling prop on top of its own.
- *
- * Holds the draft internally and only calls `onSave` on commit, so it works as
- * an uncontrolled field — `label` is the starting value, not a bound one.
- */
-declare const EditableText: ({ label, onSave, size, variant, weight, align, isMonospace, ...textProps }: EditableTextProps) => import("react").JSX.Element;
+import { type AriaAttributes, type CSSProperties } from "react";
+import { FontFamily } from "../theme/enums.js";
+import { TextSize, TextWeight } from "./Text.js";
+export interface EditableTextProps extends AriaAttributes {
+    /** Controlled committed text. */
+    value?: string;
+    /**
+     * Committed text while uncontrolled.
+     * @default ""
+     */
+    defaultValue?: string;
+    /** Called with the new text on commit (Enter or blur), only if it differs from the committed value. Not called on Escape. */
+    onChange?: (value: string) => void;
+    /** Names what is being edited ("Pipeline name"). The button reads "{ariaLabel}: {value}"; the field is labelled `ariaLabel`. */
+    ariaLabel: string;
+    /** Shown in the tertiary color while the value is empty, in both modes. */
+    placeholder?: string;
+    /**
+     * Type step, as on `Text`. Display and field use the same metrics.
+     * @default TextSize.BODY_MD
+     */
+    size?: TextSize;
+    /**
+     * Font weight, as on `Text`.
+     * @default TextWeight.REGULAR
+     */
+    weight?: TextWeight;
+    /**
+     * Type family, as on `Text`. `MONO` for identifiers.
+     * @default FontFamily.SANS
+     */
+    family?: FontFamily;
+    /** Maximum characters in the field. No limit when unset. */
+    maxLength?: number;
+    /**
+     * Render as non-editable text in the disabled color.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Stretch to the parent's width. Without it, the control is as wide as its text.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Inline text that turns into a same-type field on click and commits on Enter or blur. */
+declare const EditableText: import("react").ForwardRefExoticComponent<EditableTextProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default EditableText;