@salesforce/webapp-template-app-react-vibe-coding-starter-experimental 1.3.3

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/AccountsTable.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+
+export default function AccountsTable() {
+	// TODO: Add data fetching logic here
+	// const [accounts, setAccounts] = useState([]);
+	// const [loading, setLoading] = useState(true);
+	// const [error, setError] = useState<string | null>(null);
+
+	// Placeholder: Replace with actual data from GraphQL query
+	const hasData = false;
+
+	if (!hasData) {
+		return (
+			<div style={styles.placeholderContainer}>
+				<div style={styles.placeholderText}>Your table will appear here</div>
+			</div>
+		);
+	}
+
+	return (
+		<div style={styles.tableContainer}>
+			<div style={styles.columnContainer}>
+				{/* Account Name Column */}
+				<div style={styles.column}>
+					<div style={styles.headerCell}>
+						<div style={styles.cellText}>Account Name</div>
+					</div>
+					{/* TODO: Map over accounts data here */}
+					{/* Example: accounts.map((account) => (
+            <div key={account.Id} style={styles.dataCell}>
+              <div style={styles.cellText}>{account.Name.value || '-'}</div>
+            </div>
+          )) */}
+				</div>
+
+				{/* Billing City Column */}
+				<div style={styles.column}>
+					<div style={styles.headerCell}>
+						<div style={styles.cellText}>Billing City</div>
+					</div>
+					{/* TODO: Map over accounts data here */}
+				</div>
+
+				{/* Industry Column */}
+				<div style={styles.column}>
+					<div style={styles.headerCell}>
+						<div style={styles.cellText}>Industry</div>
+					</div>
+					{/* TODO: Map over accounts data here */}
+				</div>
+
+				{/* Annual Revenue Column */}
+				<div style={styles.column}>
+					<div style={styles.headerCell}>
+						<div style={styles.cellText}>Annual Revenue</div>
+					</div>
+					{/* TODO: Map over accounts data here */}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+const styles: Record<string, React.CSSProperties> = {
+	tableContainer: {
+		width: "100%",
+		height: "100%",
+		overflow: "auto",
+		borderRadius: "10px",
+	},
+	columnContainer: {
+		display: "flex",
+		gap: "2px",
+		alignItems: "flex-start",
+		width: "100%",
+	},
+	column: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		flex: "1 1 0",
+		minWidth: "0",
+	},
+	headerCell: {
+		background: "#e5e3ff",
+		borderRight: "2px solid #d1cef9",
+		borderBottom: "2px solid #d1cef9",
+		display: "flex",
+		alignItems: "center",
+		gap: "10px",
+		height: "36px",
+		padding: "11px",
+		overflow: "hidden",
+		boxSizing: "border-box",
+	},
+	dataCell: {
+		background: "white",
+		borderRight: "2px solid #d1cef9",
+		borderBottom: "2px solid #d1cef9",
+		display: "flex",
+		alignItems: "center",
+		gap: "10px",
+		height: "36px",
+		padding: "11px",
+		overflow: "hidden",
+		boxSizing: "border-box",
+	},
+	cellText: {
+		fontFamily: "Inter, sans-serif",
+		fontWeight: 400,
+		fontSize: "14px",
+		color: "#2b2b2b",
+		letterSpacing: "0.14px",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		lineHeight: "1.15",
+		flex: "1 1 0",
+	},
+	placeholderContainer: {
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		transform: "translate(-50%, -50%)",
+	},
+	placeholderText: {
+		fontFamily: "Inter, sans-serif",
+		fontStyle: "italic",
+		fontSize: "13px",
+		color: "#717171",
+		textAlign: "center",
+		letterSpacing: "0.13px",
+	},
+};

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/Footer.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Footer from "./Footer";
+
+describe("Footer", () => {
+	it("renders the section title", () => {
+		render(<Footer />);
+
+		expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+			"Helpful content for your first build",
+		);
+	});
+
+	it("renders all resource links", () => {
+		render(<Footer />);
+
+		const links = screen.getAllByRole("link");
+		expect(links).toHaveLength(4);
+
+		expect(screen.getByRole("link", { name: /walkthroughs/i })).toHaveAttribute(
+			"href",
+			"#walkthroughs",
+		);
+		expect(screen.getByRole("link", { name: /docs/i })).toHaveAttribute("href", "#docs");
+		expect(screen.getByRole("link", { name: /examples/i })).toHaveAttribute("href", "#examples");
+		expect(screen.getByRole("link", { name: /xx/i })).toHaveAttribute("href", "#more");
+	});
+
+	it("includes icons with each link", () => {
+		const { container } = render(<Footer />);
+
+		const images = container.querySelectorAll("img");
+		expect(images.length).toBeGreaterThan(0);
+	});
+});

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/Footer.tsx

@@ -0,0 +1,68 @@
+import type React from "react";
+import bookIcon from "@assets/icons/book.svg";
+import rocketIcon from "@assets/icons/rocket.svg";
+import starIcon from "@assets/icons/star.svg";
+
+export default function Footer() {
+	return (
+		<section style={styles.resourcesSection}>
+			<h2 style={styles.resourcesTitle}>Helpful content for your first build</h2>
+			<div style={styles.resourcesLinks}>
+				<a href="#walkthroughs" style={styles.resourceLink}>
+					<img src={starIcon} alt="" width="16" height="16" />
+					<span>Walkthroughs</span>
+				</a>
+				<a href="#docs" style={styles.resourceLink}>
+					<img src={bookIcon} alt="" width="16" height="16" />
+					<span>Docs</span>
+				</a>
+				<a href="#examples" style={styles.resourceLink}>
+					<img src={rocketIcon} alt="" width="16" height="16" />
+					<span>Examples</span>
+				</a>
+				<a href="#more" style={styles.resourceLink}>
+					<img src={rocketIcon} alt="" width="16" height="16" />
+					<span>XX</span>
+				</a>
+			</div>
+		</section>
+	);
+}
+
+const styles: Record<string, React.CSSProperties> = {
+	resourcesSection: {
+		position: "relative",
+		background: "linear-gradient(rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.5))",
+		border: "2px solid #055fff",
+		borderRadius: "100px",
+		padding: "56px 64px",
+		marginTop: "64px",
+		marginBottom: "4rem",
+		display: "flex",
+		flexDirection: "column",
+		gap: "24px",
+		backdropFilter: "blur(24px)",
+		WebkitBackdropFilter: "blur(24px)",
+	},
+	resourcesTitle: {
+		fontSize: "24px",
+		fontWeight: 600,
+		lineHeight: "normal",
+		color: "#002775",
+		margin: 0,
+	},
+	resourcesLinks: {
+		display: "flex",
+		gap: "64px",
+		alignItems: "center",
+	},
+	resourceLink: {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+		fontSize: "16px",
+		color: "#002775",
+		textDecoration: "none",
+		transition: "opacity 0.2s ease",
+	},
+};

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/Hero.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Hero from "./Hero";
+
+describe("Hero", () => {
+	it("renders heading and default image", () => {
+		render(<Hero heading="Welcome to Vibe Coding" />);
+
+		expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Welcome to Vibe Coding");
+		expect(screen.getByRole("img")).toBeInTheDocument();
+	});
+
+	it("renders with subtext when provided", () => {
+		render(<Hero heading="Test" subtext="This is a subtext" />);
+
+		expect(screen.getByText("Test")).toBeInTheDocument();
+		expect(screen.getByText("This is a subtext")).toBeInTheDocument();
+	});
+
+	it("accepts custom image and alt text", () => {
+		render(<Hero heading="Test" image="/custom-image.png" imageAlt="Custom Alt" />);
+
+		const img = screen.getByAltText("Custom Alt");
+		expect(img).toHaveAttribute("src", "/custom-image.png");
+	});
+
+	it("supports JSX content in heading and subtext", () => {
+		const heading = (
+			<>
+				Welcome <strong>Hero</strong>
+			</>
+		);
+		const subtext = (
+			<span>
+				Get <em>started</em>
+			</span>
+		);
+
+		render(<Hero heading={heading} subtext={subtext} />);
+
+		expect(screen.getByText("Hero")).toBeInTheDocument();
+		expect(screen.getByText("started")).toBeInTheDocument();
+	});
+});

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/Hero.tsx

@@ -0,0 +1,61 @@
+import type React from "react";
+import vibeCodey from "@assets/images/vibe-codey.svg";
+
+interface HeroProps {
+	heading: React.ReactNode;
+	subtext?: React.ReactNode;
+	image?: string;
+	imageAlt?: string;
+}
+
+export default function Hero({
+	heading,
+	subtext,
+	image = vibeCodey,
+	imageAlt = "Agentforce",
+}: HeroProps) {
+	return (
+		<section style={styles.heroSection}>
+			<div style={styles.heroImageContainer}>
+				<img src={image} alt={imageAlt} style={styles.heroImage} />
+			</div>
+			<h1 style={styles.heroHeading}>{heading}</h1>
+			{subtext && <p style={styles.heroSubtext}>{subtext}</p>}
+		</section>
+	);
+}
+
+const styles: Record<string, React.CSSProperties> = {
+	heroSection: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		paddingTop: "4rem",
+		paddingBottom: "4rem",
+		textAlign: "center",
+	},
+	heroImageContainer: {
+		marginBottom: "2rem",
+		position: "relative",
+	},
+	heroImage: {
+		width: "100%",
+		maxWidth: "383px",
+		height: "auto",
+	},
+	heroHeading: {
+		fontSize: "4rem",
+		fontWeight: 700,
+		lineHeight: 1.2,
+		marginBottom: "1.5rem",
+		color: "var(--on-surface-3)",
+		maxWidth: "800px",
+	},
+	heroSubtext: {
+		fontSize: "1.25rem",
+		lineHeight: 1.6,
+		color: "var(--on-surface-3)",
+		maxWidth: "100%",
+		margin: "0 auto",
+	},
+};

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/PromptCard.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import PromptCard from "./PromptCard";
+
+describe("PromptCard", () => {
+	beforeEach(() => {
+		// Mock clipboard API for tests
+		Object.defineProperty(navigator, "clipboard", {
+			value: {
+				writeText: vi.fn(() => Promise.resolve()),
+			},
+			writable: true,
+			configurable: true,
+		});
+
+		// Mock isSecureContext to true so the modern clipboard API is used
+		Object.defineProperty(window, "isSecureContext", {
+			value: true,
+			writable: true,
+			configurable: true,
+		});
+	});
+
+	it("renders title, description, and prompt text", () => {
+		render(
+			<PromptCard
+				title="Create a component"
+				description="Build a React component"
+				promptText="Generate a button component"
+			/>,
+		);
+
+		expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("Create a component");
+		expect(screen.getByText("Build a React component")).toBeInTheDocument();
+		expect(screen.getByText("Generate a button component")).toBeInTheDocument();
+	});
+
+	it("renders a clickable copy button", async () => {
+		const user = userEvent.setup();
+
+		render(<PromptCard title="Test" description="Description" promptText="Copy this text" />);
+
+		const button = screen.getByRole("button", { name: /copy prompt/i });
+		expect(button).toBeInTheDocument();
+
+		await expect(user.click(button)).resolves.not.toThrow();
+	});
+
+	it("handles long prompt text", () => {
+		const longPrompt = "A".repeat(500);
+
+		render(<PromptCard title="Test" description="Description" promptText={longPrompt} />);
+
+		expect(screen.getByText(longPrompt)).toBeInTheDocument();
+	});
+});

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/PromptCard.tsx

@@ -0,0 +1,301 @@
+import type React from "react";
+import copyIcon from "@assets/icons/copy.svg";
+
+interface PromptCardProps {
+	title: string;
+	description: string;
+	promptText: string;
+}
+
+interface ListItem {
+	content: string;
+	subItems: string[];
+}
+
+function renderMarkdown(text: string): React.ReactNode {
+	const lines = text.split("\n");
+	const elements: React.ReactNode[] = [];
+	let bulletItems: string[] = [];
+	let numberedItems: ListItem[] = [];
+
+	const renderInlineMarkdown = (line: string): React.ReactNode => {
+		// Handle bold text with **
+		const parts: React.ReactNode[] = [];
+		const boldRegex = /\*\*(.+?)\*\*/g;
+		let lastIndex = 0;
+		let match;
+
+		while ((match = boldRegex.exec(line)) !== null) {
+			if (match.index > lastIndex) {
+				parts.push(line.slice(lastIndex, match.index));
+			}
+			parts.push(
+				<strong key={match.index} style={markdownStyles.bold}>
+					{match[1]}
+				</strong>,
+			);
+			lastIndex = match.index + match[0].length;
+		}
+
+		if (lastIndex < line.length) {
+			parts.push(line.slice(lastIndex));
+		}
+
+		return parts.length > 0 ? parts : line;
+	};
+
+	const flushBulletList = () => {
+		if (bulletItems.length > 0) {
+			elements.push(
+				<ul key={`ul-${elements.length}`} style={markdownStyles.list}>
+					{bulletItems.map((item, i) => (
+						<li key={i} style={markdownStyles.listItem}>
+							{renderInlineMarkdown(item)}
+						</li>
+					))}
+				</ul>,
+			);
+			bulletItems = [];
+		}
+	};
+
+	const flushNumberedList = () => {
+		if (numberedItems.length > 0) {
+			elements.push(
+				<ol key={`ol-${elements.length}`} style={markdownStyles.numberedList}>
+					{numberedItems.map((item, i) => (
+						<li key={i} style={markdownStyles.listItem}>
+							{renderInlineMarkdown(item.content)}
+							{item.subItems.length > 0 && (
+								<ul style={markdownStyles.nestedList}>
+									{item.subItems.map((subItem, j) => (
+										<li key={j} style={markdownStyles.listItem}>
+											{renderInlineMarkdown(subItem)}
+										</li>
+									))}
+								</ul>
+							)}
+						</li>
+					))}
+				</ol>,
+			);
+			numberedItems = [];
+		}
+	};
+
+	const flushAllLists = () => {
+		flushBulletList();
+		flushNumberedList();
+	};
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+
+		// H3 headers (###)
+		if (line.startsWith("### ")) {
+			flushAllLists();
+			elements.push(
+				<h4 key={`h3-${i}`} style={markdownStyles.h3}>
+					{line.slice(4)}
+				</h4>,
+			);
+			continue;
+		}
+
+		// H2 headers (##)
+		if (line.startsWith("## ")) {
+			flushAllLists();
+			elements.push(
+				<h3 key={`h2-${i}`} style={markdownStyles.h2}>
+					{line.slice(3)}
+				</h3>,
+			);
+			continue;
+		}
+
+		// Numbered list items (1. 2. etc)
+		const numberedMatch = line.match(/^\d+\.\s+(.+)$/);
+		if (numberedMatch) {
+			flushBulletList();
+			numberedItems.push({ content: numberedMatch[1], subItems: [] });
+			continue;
+		}
+
+		// Indented sub-items under numbered list (   - item)
+		const indentedBulletMatch = line.match(/^\s{2,}[-*]\s+(.+)$/);
+		if (indentedBulletMatch && numberedItems.length > 0) {
+			numberedItems[numberedItems.length - 1].subItems.push(indentedBulletMatch[1]);
+			continue;
+		}
+
+		// Top-level unordered list items (- or *)
+		const bulletMatch = line.match(/^[-*]\s+(.+)$/);
+		if (bulletMatch) {
+			flushNumberedList();
+			bulletItems.push(bulletMatch[1]);
+			continue;
+		}
+
+		// Empty lines
+		if (line.trim() === "") {
+			// Don't flush numbered lists on empty lines - they may have more items
+			flushBulletList();
+			continue;
+		}
+
+		// Regular paragraph
+		flushAllLists();
+		elements.push(
+			<p key={`p-${i}`} style={markdownStyles.paragraph}>
+				{renderInlineMarkdown(line)}
+			</p>,
+		);
+	}
+
+	flushAllLists();
+	return elements;
+}
+
+const markdownStyles: Record<string, React.CSSProperties> = {
+	h2: {
+		fontSize: "13px",
+		fontWeight: 700,
+		color: "var(--on-surface-3)",
+		margin: "8px 0 4px 0",
+	},
+	h3: {
+		fontSize: "12px",
+		fontWeight: 600,
+		color: "var(--on-surface-3)",
+		margin: "8px 0 4px 0",
+	},
+	paragraph: {
+		margin: "0 0 4px 0",
+	},
+	list: {
+		margin: "4px 0",
+		paddingLeft: "16px",
+		listStyleType: "disc",
+	},
+	numberedList: {
+		margin: "4px 0",
+		paddingLeft: "18px",
+		listStyleType: "decimal",
+	},
+	nestedList: {
+		margin: "2px 0 2px 0",
+		paddingLeft: "16px",
+		listStyleType: "disc",
+	},
+	listItem: {
+		margin: "2px 0",
+	},
+	bold: {
+		fontWeight: 600,
+	},
+};
+
+export default function PromptCard({ title, description, promptText }: PromptCardProps) {
+	const handleCopy = () => {
+		// Try modern clipboard API first
+		if (navigator.clipboard && window.isSecureContext) {
+			navigator.clipboard.writeText(promptText).catch(() => {
+				// Fallback if modern API fails
+				fallbackCopy(promptText);
+			});
+		} else {
+			// Use fallback method for restricted environments like VSCode tabs
+			fallbackCopy(promptText);
+		}
+	};
+
+	const fallbackCopy = (text: string) => {
+		const textArea = document.createElement("textarea");
+		textArea.value = text;
+		textArea.style.position = "fixed";
+		textArea.style.left = "-999999px";
+		textArea.style.top = "-999999px";
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+		document.execCommand("copy");
+		textArea.remove();
+	};
+
+	return (
+		<div style={styles.promptContent}>
+			<h2 style={styles.promptTitle}>{title}</h2>
+			<p style={styles.promptDescription}>{description}</p>
+			<div style={styles.promptField}>
+				<div style={styles.promptFieldInner}>
+					<div style={styles.promptText}>{renderMarkdown(promptText)}</div>
+					<button
+						type="button"
+						style={styles.copyButton}
+						aria-label="Copy prompt"
+						onClick={handleCopy}
+					>
+						<img src={copyIcon} alt="Copy" width="20" height="20" />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+const styles: Record<string, React.CSSProperties> = {
+	promptContent: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		gap: "10px",
+		minWidth: 0,
+	},
+	promptTitle: {
+		fontSize: "36px",
+		fontWeight: 600,
+		lineHeight: 1.03,
+		color: "var(--on-surface-3)",
+		margin: 0,
+	},
+	promptDescription: {
+		fontSize: "16px",
+		lineHeight: 1.45,
+		color: "var(--on-surface-3)",
+		margin: 0,
+	},
+	promptField: {
+		border: "2px solid #055fff",
+		borderRadius: "20px",
+		overflow: "hidden",
+	},
+	promptFieldInner: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "8px",
+		padding: "18px",
+	},
+	promptText: {
+		flex: 1,
+		fontSize: "12px",
+		fontWeight: 500,
+		lineHeight: 1.4,
+		color: "var(--on-surface-2)",
+		margin: 0,
+		minHeight: "45px",
+		maxHeight: "150px",
+		overflow: "auto",
+	},
+	copyButton: {
+		background: "rgba(3,45,96,0.17)",
+		border: "none",
+		borderRadius: "58px",
+		padding: "8px",
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		transition: "background 0.2s ease",
+	},
+};