@primer/react-brand/esm/IDE/IDE.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import t from "../animation/Animation.module.js";
import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
import { Text as r } from "../Text/Text.js";
import { CopilotIcon as i, PaperAirplaneIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { useTabs as o } from "../hooks/useTabs.js";
import { TextInput as s } from "../forms/TextInput/TextInput.js";
import { Avatar as c } from "../Avatar/Avatar.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes-DSf1PV6b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/ide/base-Cg4X8uay.css';/* empty css                                                                                    */
/* empty css                                                                                                 */
import l from "./IDE.module.js";
import u, { Children as d, createElement as f, forwardRef as p, isValidElement as m, memo as h, useCallback as g, useEffect as _, useImperativeHandle as v, useMemo as y, useRef as b, useState as x } from "react";
import { jsx as S, jsxs as C } from "react/jsx-runtime";
//#region src/IDE/IDE.tsx
var w = {
	root: "IDE",
	get chat() {
		return `${this.root}-chat`;
	},
	get editor() {
		return `${this.root}-editor`;
	},
	get editorContent() {
		return `${this.editor}-content`;
	},
	get editorTabs() {
		return `${this.editor}-tab`;
	}
}, T = h(({ children: t, className: n, "data-testid": r, height: i, variant: a = "default", ...o }) => {
	let [s, c] = x(!1), [f, p] = x(!1), [h, v] = x(!1), T = b(null), E = b(null);
	_(() => {
		f && h && c(!1);
	}, [f, h]);
	let D = y(() => d.toArray(t), [t]), O = D.find((e) => m(e) && e.type === P.Chat), k = !!O, A = k ? u.cloneElement(O, {
		ref: T,
		"data-testid": r || w.chat,
		animationIsPaused: s,
		setAnimationIsDone: p
	}) : null, j = D.find((e) => m(e) && e.type === P.Editor), M = !!j, F = M ? u.cloneElement(j, {
		ref: E,
		"data-testid": r || w.editor,
		animationIsPaused: s,
		setAnimationIsDone: v
	}) : null, I = (!k || f) && (!M || h), L = g((e) => {
		I ? (p(!1), v(!1), T.current?.resetAnimation(), E.current?.resetAnimation()) : c(!e);
	}, [I]);
	return /* @__PURE__ */ S("section", {
		"data-testid": r || w.root,
		className: e(l[`IDE--${a}`], k && M && l["IDE--full-exp"], k && !M && l["IDE--chat-only"], n),
		children: /* @__PURE__ */ S("div", {
			...o,
			children: /* @__PURE__ */ C("div", {
				className: l.IDE__inner,
				style: { "--brand-IDE-height": i ? `${i}px` : void 0 },
				children: [/* @__PURE__ */ C("div", {
					className: l.IDE__main,
					children: [A, F]
				}), /* @__PURE__ */ S(N, {
					isPlaying: !s && !I,
					onPlayPause: L
				})]
			})
		})
	});
}), E = h(p(({ "data-testid": t, script: o, animationDelay: u = 3e3, alternativeText: d, animationIsPaused: f, setAnimationIsDone: p, ...m }, h) => {
	let y = n(h), T = u, E = b(null), [D, O] = x([]), k = b(f);
	k.current = f;
	let A = g((e) => {
		if (!e || !E.current) return;
		let t = E.current, n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
		(n.top < r.top || n.bottom > r.bottom) && (t.scrollTop += n.top - r.top);
	}, []), j = g(() => {
		if (!o.length) return;
		let e = document.querySelectorAll(`.${l["IDE__Chat-message"]}`), t = Array.from(e).slice(0, 1), n = Array.from(e).slice(1), r = [];
		t[0] && r.push({
			delay: 0,
			action: "show",
			element: t[0]
		}), r.push({
			delay: T / 4,
			action: "delay"
		});
		for (let [e, t] of n.entries()) r.push({
			delay: T,
			action: "show",
			element: t,
			shouldScroll: e % 2 == 0,
			shouldFadePrevious: !0,
			messageIndex: e,
			isLast: e === n.length - 1
		});
		r.push({
			delay: 100,
			isDone: !0
		}), O(r);
	}, [o, T]), M = g(() => {
		p?.(!1);
		let e = document.querySelectorAll(`.${l["IDE__Chat-message"]}`);
		for (let t of e) t.classList.remove(l["IDE__Chat-message--visible"], l["IDE__Chat-message--faded"]);
		E.current && (E.current.scrollTop = 0), j();
	}, [j, p]);
	return v(y, () => y.current ? {
		...y.current,
		resetAnimation: M
	} : { resetAnimation: M }), _(() => {
		j();
	}, [j]), _(() => {
		let e = -1, t, n = 0, r = (i) => {
			if (n >= D.length || k.current) {
				k.current && (e = -1), t = requestAnimationFrame(r);
				return;
			}
			let a = e === -1 ? 0 : i - e;
			e = i;
			let o = D[n];
			if (o.isDone) {
				p?.(!0);
				return;
			}
			if (o.delay -= a, o.delay <= 0) if (o.action === "delay") n++;
			else {
				let e = o;
				if (e.shouldScroll && A(e.element), e.shouldFadePrevious) {
					let t = document.querySelectorAll(`.${l["IDE__Chat-message"]}`), n = Array.from(t).slice(0, 1), r = Array.from(t).slice(1);
					for (let e of n) e.classList.add(l["IDE__Chat-message--faded"]);
					let i = r.filter((t, n) => n < (e.messageIndex ?? 0));
					for (let e of i) e.classList.add(l["IDE__Chat-message--faded"]);
					e.isLast && setTimeout(() => {
						for (let e of n) e.classList.remove(l["IDE__Chat-message--faded"]);
						for (let e of r) e.classList.remove(l["IDE__Chat-message--faded"]);
					}, 100);
				}
				e.element.classList.add(l["IDE__Chat-message--visible"]), n++;
			}
			t = requestAnimationFrame(r);
		};
		return t = requestAnimationFrame(r), () => {
			t && cancelAnimationFrame(t);
		};
	}, [
		D,
		A,
		p
	]), /* @__PURE__ */ C("section", {
		ref: y,
		className: l.IDE__Chat,
		"data-testid": t || w.chat,
		...m,
		children: [/* @__PURE__ */ S("span", {
			className: "visually-hidden",
			children: d
		}), /* @__PURE__ */ C("div", {
			className: l["IDE__Chat-wrapper"],
			"aria-hidden": !0,
			children: [/* @__PURE__ */ S("div", {
				ref: E,
				className: l["IDE__Chat-messages"],
				children: o.length && o.map((t, n) => /* @__PURE__ */ C("div", {
					id: `IDE__Chat-message-${n}`,
					className: e(l["IDE__Chat-message"], t.role === "user" && l["IDE__Chat-message--user"]),
					children: [/* @__PURE__ */ C("div", {
						className: l["IDE__Chat-message-user"],
						children: [t.role === "user" ? /* @__PURE__ */ S(c, {
							src: t.avatar,
							alt: t.handle
						}) : /* @__PURE__ */ S(i, { size: 24 }), /* @__PURE__ */ S(r, {
							as: "p",
							size: "100",
							weight: "medium",
							className: l["IDE__Chat-message-handle"],
							children: t.handle
						})]
					}), /* @__PURE__ */ C("div", {
						className: l["IDE__Chat-message-content"],
						children: [
							/* @__PURE__ */ S("div", {
								className: l["IDE__Chat-message-text"],
								children: t.message
							}),
							t.highlighter && t.codeSnippet && /* @__PURE__ */ S("pre", {
								className: l["IDE__Chat-message-snippet"],
								dangerouslySetInnerHTML: { __html: t.codeSnippet }
							}),
							!t.highlighter && t.codeSnippet && /* @__PURE__ */ S("pre", {
								className: l["IDE__Chat-message-snippet"],
								children: t.codeSnippet
							})
						]
					})]
				}, n))
			}), /* @__PURE__ */ S("div", {
				className: l["IDE__Chat-input-area"],
				children: /* @__PURE__ */ S(s, {
					disabled: !0,
					className: l["IDE__Chat-input"],
					fullWidth: !0,
					placeholder: "Ask a question or type '/' for commands.",
					trailingVisual: /* @__PURE__ */ S(a, { className: l["IDE__Chat-input-icon"] })
				})
			})]
		})]
	});
})), D = "https://github.com/primer/brand/assets", O = {
	py: `${D}/13340707/7ca66487-d958-4c30-acbc-397f7a6169b7`,
	ts: `${D}/13340707/2a7b87cf-b522-4ab5-a127-5a2c69bd0a89`,
	js: `${D}/13340707/5a7bfffa-af38-4e32-ab39-a9e7efbcc7c6`,
	jsx: `${D}/13340707/d975a978-dbc7-4626-b995-c00cac9bc132`,
	hs: `${D}/13340707/826843ce-424b-4693-84d3-a43e4b7f1280`,
	html: `${D}/13340707/f5b03413-b8f4-4cd5-9d91-6b574ada14ed`,
	css: `${D}/13340707/3df2f0ba-daff-4b76-8492-f5773c515369`,
	scss: `${D}/13340707/a1d21f2e-c813-4211-8d9a-2869c1968e9a`,
	json: `${D}/13340707/ca21068e-8c27-4b84-9a1d-b965b49b3568`,
	md: `${D}/13340707/39e7ff2b-9d0a-47e9-9686-bed51800084c`,
	yml: `${D}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,
	yaml: `${D}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,
	txt: `${D}/13340707/7c52da20-1fe2-496c-b4bb-6ea61d0fe3dd`,
	sh: `${D}/13340707/549ce181-4541-4811-8712-a9c5abd8eeae`,
	sql: `${D}/13340707/b2b73a2e-e4e1-47c8-aabc-c204836244b8`
}, k = Object.keys(O), A = h(p(({ activeTab: a = 0, "data-testid": s, files: c, triggerAnimation: d = !1, showLineNumbers: p = !0, size: m = "medium", tabIcons: h = O, animationIsPaused: y, setAnimationIsDone: T, ...E }, D) => {
	let k = n(D), A = b(null), [j, M] = x([]), N = b(y);
	N.current = y;
	let P = o({
		defaultTab: a.toString(),
		autoActivate: !0,
		onTabActivate: (e, t) => {
			t?.scrollIntoView({
				behavior: "smooth",
				block: "nearest",
				inline: "start"
			}), I();
		}
	}), F = g(() => {
		if (!A.current) return;
		let e = A.current.querySelectorAll("pre:not([data-has-suggestion=\"true\"])"), t = A.current.querySelectorAll("pre[data-has-suggestion=\"true\"]"), n = [];
		for (let t of e) n.push({
			delay: 200,
			elements: [t],
			tab: P.activeTab
		});
		n.push({
			delay: 1e3,
			elements: Array.from(t),
			tab: P.activeTab
		}), n.push({
			delay: 200,
			isDone: !0,
			tab: P.activeTab
		}), M(n);
	}, [P.activeTab]), I = g(() => {
		M([]), T?.(!1);
		let e = A.current?.querySelectorAll("pre");
		if (e) for (let n of e) n.classList.remove(t["Animation--active"]);
		F();
	}, [F, T]);
	return v(k, () => k.current ? {
		...k.current,
		resetAnimation: I
	} : { resetAnimation: I }), _(() => {
		F();
	}, [F, d]), _(() => {
		let e = -1, n, r = 0, i = (a) => {
			if (r >= j.length || P.activeTab === null) return;
			if (N.current) {
				e = -1, n = requestAnimationFrame(i);
				return;
			}
			let o = e === -1 ? 0 : a - e;
			e = a;
			let s = j[r];
			if (s.isDone) {
				T?.(!0);
				return;
			}
			if (s.tab === P.activeTab) {
				if (s.delay -= o, s.delay <= 0) {
					for (let e of s.elements) e.classList.add(t["Animation--active"]);
					r++;
				}
				n = requestAnimationFrame(i);
			}
		};
		return n = requestAnimationFrame(i), () => {
			n && cancelAnimationFrame(n);
		};
	}, [
		j,
		T,
		P.activeTab
	]), /* @__PURE__ */ C("div", {
		className: e(l.IDE__Editor, l[`IDE__Editor--${m}`]),
		"data-testid": s || w.editor,
		...E,
		children: [/* @__PURE__ */ S("div", {
			className: l["IDE__Editor-tabs"],
			"data-testid": w.editorTabs,
			...P.getTabListProps({ label: "files" }),
			children: c.map((t, n) => {
				let r = t.name.split(".").pop(), i = P.activeTab === n.toString();
				return /* @__PURE__ */ f("button", {
					...P.getTabProps(n.toString()),
					key: t.name,
					className: e(l["IDE__Editor-tab"], i && l["IDE__Editor-tab--active"])
				}, r && /* @__PURE__ */ S("img", {
					className: l["IDE__Editor-tab-icon"],
					alt: "",
					width: 16,
					height: 16,
					src: h[r]
				}), t.name);
			})
		}), /* @__PURE__ */ S("div", {
			className: l["IDE__Editor-content"],
			children: c.map((n, a) => /* @__PURE__ */ f("div", {
				...P.getTabPanelProps(a.toString()),
				key: n.name
			}, /* @__PURE__ */ S("span", {
				className: "visually-hidden",
				children: n.alternativeText
			}), /* @__PURE__ */ C("div", {
				className: l["IDE__Editor-content-wrapper"],
				"aria-hidden": "true",
				children: [p && /* @__PURE__ */ S("div", {
					className: l["IDE__Editor-lineNumbers"],
					children: (Array.isArray(n.code) ? n.code : n.code.split("\n")).map((e, t) => /* @__PURE__ */ S("div", {
						className: l["IDE__Editor-lineNumber"],
						children: t + 1
					}, t))
				}), /* @__PURE__ */ S("div", {
					ref: P.activeTab === a.toString() ? A : null,
					"data-testid": w.editorContent,
					className: l["IDE__Editor-content-inner"],
					children: Array.isArray(n.code) ? n.code.map((a, o) => {
						let s = o + 1 >= (n.suggestedLineStart ?? Infinity);
						return /* @__PURE__ */ C(u.Fragment, { children: [/* @__PURE__ */ S("pre", {
							className: e(l["IDE__Editor-pane"], o + 1 < (n.suggestedLineStart ?? Infinity) && t["Animation--slide-in-right"], s && t["Animation--slide-in-down"], s && l["IDE__Editor-pane--suggested"]),
							dangerouslySetInnerHTML: { __html: a === "" ? "&nbsp;" : a },
							"data-has-suggestion": s
						}, o), s && o === n.code.length - 1 && /* @__PURE__ */ C("pre", {
							className: e(t["Animation--slide-in-down"], l["IDE__Chat-copilot-indicator"]),
							"data-has-suggestion": s,
							children: [/* @__PURE__ */ S(i, {
								size: 24,
								className: l["IDE__Chat-copilot-indicator-label"]
							}), /* @__PURE__ */ S(r, {
								as: "span",
								className: l["IDE__Chat-copilot-indicator-label"],
								children: "Copilot"
							})]
						})] }, a + o);
					}) : /* @__PURE__ */ S("pre", {
						className: e(l["IDE__Editor-pane"], t["Animation--slide-in-right"]),
						dangerouslySetInnerHTML: { __html: n.code }
					})
				})]
			})))
		})]
	});
})), j = () => /* @__PURE__ */ S("svg", {
	fill: "none",
	role: "presentation",
	"aria-hidden": "true",
	viewBox: "3.17 2.28 13.7 15.42",
	children: /* @__PURE__ */ S("path", {
		d: "M4.66148 2.3125C3.83593 2.3125 3.16669 2.98174 3.16669 3.80729V16.1927C3.16669 17.0183 3.83593 17.6875 4.66148 17.6875H7.65106C8.47662 17.6875 9.14586 17.0183 9.14586 16.1927V3.80729C9.14586 2.98174 8.47662 2.3125 7.65106 2.3125H4.66148ZM4.44794 3.80729C4.44794 3.68936 4.54355 3.59375 4.66148 3.59375H7.65106C7.769 3.59375 7.86461 3.68936 7.86461 3.80729V16.1927C7.86461 16.3106 7.769 16.4062 7.65106 16.4062H4.66148C4.54355 16.4062 4.44794 16.3106 4.44794 16.1927V3.80729ZM12.349 2.3125C11.5235 2.3125 10.8542 2.98174 10.8542 3.80729V16.1927C10.8542 17.0183 11.5235 17.6875 12.349 17.6875H15.3386C16.1642 17.6875 16.8334 17.0183 16.8334 16.1927V3.80729C16.8334 2.98174 16.1642 2.3125 15.3386 2.3125H12.349ZM12.1355 3.80729C12.1355 3.68936 12.2311 3.59375 12.349 3.59375H15.3386C15.4565 3.59375 15.5521 3.68936 15.5521 3.80729V16.1927C15.5521 16.3106 15.4565 16.4062 15.3386 16.4062H12.349C12.2311 16.4062 12.1355 16.3106 12.1355 16.1927V3.80729Z",
		fill: "currentColor"
	})
}), M = () => /* @__PURE__ */ S("svg", {
	fill: "none",
	role: "presentation",
	"aria-hidden": "true",
	viewBox: "4.02 2.3 14.43 15.4",
	children: /* @__PURE__ */ S("path", {
		d: "M6.24905 3.69194C5.82218 3.45967 5.30225 3.76868 5.30225 4.25466V15.7452C5.30225 16.2312 5.82218 16.5402 6.24906 16.3079L16.8079 10.5626C17.2538 10.32 17.2538 9.67983 16.8079 9.4372L6.24905 3.69194ZM4.021 4.25466C4.021 2.79672 5.58078 1.86969 6.86142 2.56651L17.4203 8.31176C18.758 9.03966 18.758 10.9602 17.4203 11.6881L6.86143 17.4333C5.58079 18.1301 4.021 17.2031 4.021 15.7452V4.25466Z",
		fill: "currentColor"
	})
}), N = ({ isPlaying: e = !0, onPlayPause: t }) => {
	let n = g(() => {
		t?.(!e);
	}, [t, e]);
	return /* @__PURE__ */ S("button", {
		className: l["IDE__play-pause-button"],
		type: "button",
		onClick: n,
		"aria-label": e ? "Pause animation" : "Play animation",
		children: S(e ? j : M, {})
	});
}, P = Object.assign(T, {
	testIds: w,
	Chat: E,
	Editor: A
});
//#endregion
export { P as IDE, O as IDEDefaultIconMap, k as IDEFileExtensions };

//# sourceMappingURL=IDE.js.map