@salesforce/webapp-template-feature-graphql-experimental 1.27.0

package/dist/force-app/main/default/webapplications/feature-graphql/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "base-react-app",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:e2e": "npm run build && node scripts/rewrite-e2e-assets.mjs",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@salesforce/sdk-data": "^1.22.0",
+    "@salesforce/webapp-experimental": "*",
+    "@tailwindcss/vite": "^4.1.17",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.10.1",
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@graphql-codegen/cli": "^6.1.1",
+    "@graphql-codegen/typescript": "^5.0.7",
+    "@graphql-codegen/typescript-operations": "^5.0.7",
+    "@playwright/test": "^1.49.0",
+    "@salesforce/vite-plugin-webapp-experimental": "*",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/ui": "^4.0.17",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "graphql": "^16.12.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
+    "jsdom": "^25.0.1",
+    "serve": "^14.2.5",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-graphql-codegen": "^3.8.0",
+    "vitest": "^4.0.17"
+  }
+}

package/dist/force-app/main/default/webapplications/feature-graphql/playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const E2E_PORT = 5175;
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: `http://localhost:${E2E_PORT}`,
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    // Serve built dist/ with static server so e2e works in CI without SF org (vite preview runs plugin and can fail)
+    command: `npx serve dist -l ${E2E_PORT}`,
+    url: `http://localhost:${E2E_PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: process.env.CI ? 120_000 : 60_000,
+  },
+});

package/dist/force-app/main/default/webapplications/feature-graphql/scripts/rewrite-e2e-assets.mjs

@@ -0,0 +1,23 @@
+/**
+ * Prepares dist/ for e2e: root-relative asset paths + SPA fallback for serve.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distDir = join(__dirname, '..', 'dist');
+
+// Rewrite index.html so asset paths are root-relative (/assets/...)
+const indexPath = join(distDir, 'index.html');
+let html = readFileSync(indexPath, 'utf8');
+html = html.replace(/(src|href)="[^"]*\/assets\//g, '$1="/assets/');
+writeFileSync(indexPath, html);
+
+// SPA fallback so /about, /non-existent-route etc. serve index.html
+writeFileSync(
+  join(distDir, 'serve.json'),
+  JSON.stringify({
+    rewrites: [{ source: '**', destination: '/index.html' }],
+  })
+);

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/graphql-operations-types.ts

@@ -0,0 +1,124 @@
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = {
+	[_ in K]?: never;
+};
+export type Incremental<T> =
+	| T
+	| { [P in keyof T]?: P extends " $fragmentName" | "__typename" ? T[P] : never };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+	ID: { input: string; output: string };
+	String: { input: string; output: string };
+	Boolean: { input: boolean; output: boolean };
+	Int: { input: number; output: number };
+	Float: { input: number; output: number };
+	Base64: { input: any; output: any };
+	/** An arbitrary precision signed decimal */
+	BigDecimal: { input: any; output: any };
+	/** An arbitrary precision signed integer */
+	BigInteger: { input: any; output: any };
+	/** An 8-bit signed integer */
+	Byte: { input: any; output: any };
+	/** A UTF-16 code unit; a character on Unicode's BMP */
+	Char: { input: any; output: any };
+	Currency: { input: any; output: any };
+	Date: { input: any; output: any };
+	DateTime: { input: any; output: any };
+	Double: { input: any; output: any };
+	Email: { input: any; output: any };
+	EncryptedString: { input: any; output: any };
+	/** Can be set to an ID or a Reference to the result of another mutation operation. */
+	IdOrRef: { input: any; output: any };
+	JSON: { input: any; output: any };
+	Latitude: { input: any; output: any };
+	/** A 64-bit signed integer */
+	Long: { input: any; output: any };
+	LongTextArea: { input: any; output: any };
+	Longitude: { input: any; output: any };
+	MultiPicklist: { input: any; output: any };
+	Percent: { input: any; output: any };
+	PhoneNumber: { input: any; output: any };
+	Picklist: { input: any; output: any };
+	RichTextArea: { input: any; output: any };
+	/** A 16-bit signed integer */
+	Short: { input: any; output: any };
+	TextArea: { input: any; output: any };
+	Time: { input: any; output: any };
+	Url: { input: any; output: any };
+};
+
+export enum DataType {
+	Address = "ADDRESS",
+	Anytype = "ANYTYPE",
+	Base64 = "BASE64",
+	Boolean = "BOOLEAN",
+	Combobox = "COMBOBOX",
+	Complexvalue = "COMPLEXVALUE",
+	Currency = "CURRENCY",
+	Date = "DATE",
+	Datetime = "DATETIME",
+	Double = "DOUBLE",
+	Email = "EMAIL",
+	Encryptedstring = "ENCRYPTEDSTRING",
+	Int = "INT",
+	Json = "JSON",
+	Junctionidlist = "JUNCTIONIDLIST",
+	Location = "LOCATION",
+	Long = "LONG",
+	Multipicklist = "MULTIPICKLIST",
+	Percent = "PERCENT",
+	Phone = "PHONE",
+	Picklist = "PICKLIST",
+	Reference = "REFERENCE",
+	String = "STRING",
+	Textarea = "TEXTAREA",
+	Time = "TIME",
+	Url = "URL",
+}
+
+export enum FieldExtraTypeInfo {
+	ExternalLookup = "EXTERNAL_LOOKUP",
+	ImageUrl = "IMAGE_URL",
+	IndirectLookup = "INDIRECT_LOOKUP",
+	Personname = "PERSONNAME",
+	Plaintextarea = "PLAINTEXTAREA",
+	Richtextarea = "RICHTEXTAREA",
+	SwitchablePersonname = "SWITCHABLE_PERSONNAME",
+}
+
+export enum ResultOrder {
+	Asc = "ASC",
+	Desc = "DESC",
+}
+
+export type GetHighRevenueAccountsQueryVariables = Exact<{
+	minRevenue?: InputMaybe<Scalars["Currency"]["input"]>;
+}>;
+
+export type GetHighRevenueAccountsQuery = {
+	uiapi: {
+		query: {
+			Account?: {
+				edges?: Array<{
+					node?: {
+						Id: string;
+						Name?: { value?: string | null } | null;
+						AnnualRevenue?: { value?: any | null } | null;
+						Industry?: { value?: any | null } | null;
+						Website?: { value?: any | null } | null;
+					} | null;
+				} | null> | null;
+			} | null;
+		};
+	};
+};
+
+export type CurrentUserQueryVariables = Exact<{ [key: string]: never }>;
+
+export type CurrentUserQuery = {
+	uiapi: { currentUser?: { Id: string; Name?: { value?: string | null } | null } | null };
+};

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/graphql.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { executeGraphQL } from "./graphql";
+import { sdk } from "@salesforce/sdk-data";
+
+vi.mock("@salesforce/sdk-data", () => ({
+	sdk: { graphql: vi.fn() },
+}));
+
+describe("executeGraphQL", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("should successfully execute a GraphQL query", async () => {
+		const mockData = {
+			uiapi: {
+				query: {
+					Account: {
+						edges: [
+							{
+								node: {
+									Id: "001",
+									Name: { value: "Test Account" },
+								},
+							},
+						],
+					},
+				},
+			},
+		};
+
+		vi.mocked(sdk.graphql!).mockResolvedValue({ data: mockData });
+
+		const query = "query { uiapi { query { Account { edges { node { Id Name { value } } } } } } }";
+		const result = await executeGraphQL(query);
+
+		expect(sdk.graphql).toHaveBeenCalledWith(query, undefined);
+		expect(result).toEqual(mockData);
+	});
+
+	it("should handle GraphQL errors", async () => {
+		const mockErrors = [{ message: "Field not found" }, { message: "Invalid query" }];
+
+		vi.mocked(sdk.graphql!).mockResolvedValue({ errors: mockErrors } as any);
+
+		const query = "query { invalid }";
+
+		await expect(executeGraphQL(query)).rejects.toThrow(
+			"GraphQL Error: Field not found; Invalid query",
+		);
+	});
+
+	it("should handle network errors", async () => {
+		vi.mocked(sdk.graphql!).mockRejectedValue({
+			status: 500,
+			message: "Network error",
+		});
+
+		const query = "query { test }";
+
+		await expect(executeGraphQL(query)).rejects.toThrow("Network error");
+	});
+
+	it("should throw when data is undefined", async () => {
+		vi.mocked(sdk.graphql!).mockResolvedValue({} as any);
+
+		const query = "query { test }";
+
+		await expect(executeGraphQL(query)).rejects.toThrow("GraphQL Error: No data returned");
+	});
+
+	it("should throw when data is null", async () => {
+		vi.mocked(sdk.graphql!).mockResolvedValue({ data: null } as any);
+
+		const query = "query { test }";
+
+		await expect(executeGraphQL(query)).rejects.toThrow("GraphQL Error: No data returned");
+	});
+
+	it("should pass variables to the GraphQL query", async () => {
+		const mockData = { test: "data" };
+		vi.mocked(sdk.graphql!).mockResolvedValue({ data: mockData });
+
+		const query = "query GetAccount($id: ID!) { account(id: $id) { name } }";
+		const variables = { id: "001" };
+
+		await executeGraphQL(query, variables);
+
+		expect(sdk.graphql).toHaveBeenCalledWith(query, variables);
+	});
+});

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/graphql.ts

@@ -0,0 +1,35 @@
+import { sdk } from "@salesforce/sdk-data";
+
+export type NodeOfConnection<T> = T extends {
+	edges?: (infer E)[] | null;
+} | null
+	? E extends { node?: infer N } | null
+		? N
+		: never
+	: never;
+
+/**
+ * Execute a GraphQL query against the Salesforce GraphQL API
+ *
+ * @param query - The GraphQL query string
+ * @param variables - Optional variables for the query
+ * @returns The GraphQL response data
+ */
+export async function executeGraphQL<T, InputVariables = Record<string, unknown>>(
+	query: string,
+	variables?: InputVariables,
+): Promise<T> {
+	const result = await sdk.graphql!<T, InputVariables>(query, variables);
+
+	if (result.errors?.length) {
+		const errorMessages = result.errors.map((e) => e.message).join("; ");
+		throw new Error(`GraphQL Error: ${errorMessages}`);
+	}
+
+	if (!result.data) {
+		throw new Error("GraphQL Error: No data returned");
+	}
+
+	return result.data;
+}
+export { gql } from "@salesforce/sdk-data";

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/utils/accounts.ts

@@ -0,0 +1,35 @@
+/**
+ * @attention agents
+ * This file serves as a reference example for accessing Salesforce data via GraphQL.
+ * Use this pattern when implementing new data fetching utilities:
+ * 1. Define TypeScript interfaces for the response shape
+ * 2. Write the GraphQL query using UIAPI syntax
+ * 3. Use executeGraphQL<T>() with proper typing
+ * 4. Extract and return the relevant data from the response
+ */
+
+import { executeGraphQL, type NodeOfConnection } from "../graphql";
+import HIGH_REVENUE_ACCOUNTS_QUERY from "./query/highRevenueAccountsQuery.graphql?raw";
+import type {
+	GetHighRevenueAccountsQuery,
+	GetHighRevenueAccountsQueryVariables,
+} from "../graphql-operations-types";
+
+type AccountNode = NodeOfConnection<GetHighRevenueAccountsQuery["uiapi"]["query"]["Account"]>;
+
+/**
+ * Fetch accounts with annual revenue greater than the specified amount
+ *
+ * @param minRevenue - Minimum annual revenue threshold (default: 100000)
+ * @returns Array of accounts matching the criteria
+ */
+export async function getHighRevenueAccounts(
+	variables: GetHighRevenueAccountsQueryVariables,
+): Promise<AccountNode[]> {
+	const response = await executeGraphQL<GetHighRevenueAccountsQuery>(
+		HIGH_REVENUE_ACCOUNTS_QUERY,
+		variables,
+	);
+
+	return response.uiapi?.query?.Account?.edges?.map((edge) => edge?.node) || [];
+}

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/utils/query/highRevenueAccountsQuery.graphql

@@ -0,0 +1,29 @@
+query GetHighRevenueAccounts($minRevenue: Currency) {
+	uiapi {
+		query {
+			Account(
+				where: { AnnualRevenue: { gt: $minRevenue } }
+				orderBy: { AnnualRevenue: { order: DESC } }
+				first: 50
+			) {
+				edges {
+					node {
+						Id
+						Name {
+							value
+						}
+						AnnualRevenue {
+							value
+						}
+						Industry {
+							value
+						}
+						Website {
+							value
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/utils/user.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { getCurrentUser } from "./user";
+import { executeGraphQL } from "../graphql";
+
+vi.mock("../graphql", async () => {
+	return {
+		gql: vi.fn((strings: TemplateStringsArray, ...values: unknown[]) => {
+			return strings.reduce((prev, curr, i) => {
+				return prev + curr + (values[i] ?? "");
+			}, "");
+		}),
+		executeGraphQL: vi.fn(),
+	};
+});
+
+// Get reference to the mocked function for assertions
+const mockGraphql = vi.mocked(executeGraphQL);
+
+// Mock console.error to avoid noise in test output
+const mockConsoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+
+describe("User API Utils", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	afterEach(() => {
+		mockConsoleError.mockClear();
+	});
+
+	describe("getCurrentUser", () => {
+		const mockResponse = {
+			uiapi: {
+				currentUser: {
+					Id: "005000000000001",
+					Name: { value: "John Doe" },
+				},
+			},
+		} as any;
+
+		it("successfully fetches current user", async () => {
+			mockGraphql.mockResolvedValue(mockResponse);
+
+			const result = await getCurrentUser();
+
+			expect(mockGraphql).toHaveBeenCalledWith(expect.any(String));
+			expect(result).toEqual({
+				id: "005000000000001",
+				name: "John Doe",
+			});
+		});
+
+		it('falls back to "User" when name is empty', async () => {
+			mockGraphql.mockResolvedValue({
+				uiapi: {
+					currentUser: {
+						Id: "005000000000003",
+						Name: { value: "" },
+					},
+				},
+			} as any);
+
+			const result = await getCurrentUser();
+
+			expect(result).toEqual({
+				id: "005000000000003",
+				name: "User",
+			});
+		});
+
+		it('falls back to "User" when name is null', async () => {
+			mockGraphql.mockResolvedValue({
+				uiapi: {
+					currentUser: {
+						Id: "005000000000004",
+						Name: { value: null },
+					},
+				},
+			} as any);
+
+			const result = await getCurrentUser();
+
+			expect(result).toEqual({
+				id: "005000000000004",
+				name: "User",
+			});
+		});
+
+		it('falls back to "User" when name is undefined', async () => {
+			mockGraphql.mockResolvedValue({
+				uiapi: {
+					currentUser: {
+						Id: "005000000000005",
+						Name: { value: undefined },
+					},
+				},
+			} as any);
+
+			const result = await getCurrentUser();
+
+			expect(result).toEqual({
+				id: "005000000000005",
+				name: "User",
+			});
+		});
+
+		it("throws error when request fails", async () => {
+			const apiError = new Error("Bad stuff");
+			mockGraphql.mockRejectedValue(apiError);
+
+			await expect(getCurrentUser()).rejects.toThrow("Bad stuff");
+			expect(mockConsoleError).toHaveBeenCalledWith("Error fetching user data:", apiError);
+		});
+
+		it("throws error when no user data is found", async () => {
+			mockGraphql.mockResolvedValue({
+				uiapi: {},
+			} as any);
+
+			await expect(getCurrentUser()).rejects.toThrow("No user data found");
+			expect(mockConsoleError).toHaveBeenCalled();
+		});
+	});
+});

package/dist/force-app/main/default/webapplications/feature-graphql/src/api/utils/user.ts

@@ -0,0 +1,45 @@
+import { executeGraphQL, gql } from "../graphql";
+import { type CurrentUserQuery } from "../graphql-operations-types";
+
+interface User {
+	id: string;
+	name: string;
+}
+
+const CURRENT_USER_QUERY = gql`
+	query CurrentUser {
+		uiapi {
+			currentUser {
+				Id
+				Name {
+					value
+				}
+			}
+		}
+	}
+`;
+
+/**
+ * Fetch current user information from Salesforce
+ * Uses Chatter API to get current user details
+ * @returns User info or null if no session
+ */
+export async function getCurrentUser(): Promise<User | null> {
+	try {
+		const response = await executeGraphQL<CurrentUserQuery>(CURRENT_USER_QUERY);
+
+		const userData = response.uiapi.currentUser;
+
+		if (!userData) {
+			throw new Error("No user data found");
+		}
+
+		return {
+			id: userData.Id,
+			name: userData.Name?.value || "User",
+		};
+	} catch (error) {
+		console.error("Error fetching user data:", error);
+		throw error;
+	}
+}

package/dist/force-app/main/default/webapplications/feature-graphql/src/app.tsx

@@ -0,0 +1,13 @@
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import { routes } from '@/routes';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles/global.css';
+
+const router = createBrowserRouter(routes);
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>
+);

package/dist/force-app/main/default/webapplications/feature-graphql/src/appLayout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router";
+import NavigationMenu from "./navigationMenu";
+
+export default function AppLayout() {
+	return (
+		<>
+			<NavigationMenu />
+			<Outlet />
+		</>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-graphql/src/assets/icons/book.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4935 0.000188828L13.9735 0.533522V10.5069L13.4935 11.0402H8.21348L7.36015 11.8935H6.61348L5.76015 11.0402H0.48015L0.000149727 10.5069V0.533522L0.48015 0.000188828H5.97348L6.34682 0.160189L6.98682 0.800188L7.62682 0.160189L8.00015 0.000188828H13.4935ZM6.50682 10.3469V1.76019L5.76015 1.01352H1.01348V10.0269H5.97348L6.29348 10.1869L6.50682 10.3469ZM13.0135 10.0269V1.01352H8.21348L7.52015 1.70685V10.2935L7.62682 10.1869L8.00015 10.0269H13.0135ZM5.01348 3.04019V4.00019H1.97348V3.04019H5.01348ZM5.01348 7.04019V8.00019H1.97348V7.04019H5.01348ZM1.97348 5.01352V6.02686H5.01348V5.01352H1.97348ZM12.0001 3.04019V4.00019H9.01348V3.04019H12.0001ZM9.01348 5.01352V6.02686H12.0001V5.01352H9.01348ZM9.01348 7.04019V8.00019H12.0001V7.04019H9.01348Z" fill="#0250D9"/>
+</svg>

package/dist/force-app/main/default/webapplications/feature-graphql/src/assets/icons/copy.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5L6.25 3.75H13.0175L17.5 8.2325V17.5L16.25 18.75H6.25L5 17.5V5ZM16.25 8.75L12.5 5H6.25V17.5H16.25V8.75Z" fill="#2E2E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 1.25L2.5 2.5V15L3.75 16.25V2.5H11.7675L10.5175 1.25H3.75Z" fill="#2E2E2E"/>
+</svg>

package/dist/force-app/main/default/webapplications/feature-graphql/src/assets/icons/rocket.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4935 0.000149727L13.9735 0.480149C13.9735 2.15126 13.5646 3.80459 12.7468 5.44015C12.0713 6.7557 11.1468 8.05348 9.97348 9.33348V13.4935L9.49348 13.9735H6.50682L6.13348 13.8668L0.16015 7.84015L0.000149727 7.46682V4.48015L0.48015 4.00015H4.64015C5.92015 2.82682 7.21793 1.90237 8.53348 1.22682C10.169 0.409039 11.8224 0.000149727 13.4935 0.000149727ZM1.01348 4.96015V7.30682L1.38682 7.68015C2.06237 6.72015 2.80904 5.81348 3.62682 4.96015H1.01348ZM6.66682 12.9601H8.96015V10.3468C8.14237 11.1646 7.25348 11.9113 6.29348 12.5868L6.66682 12.9601ZM5.54682 11.8401C6.40015 11.2713 7.23571 10.6135 8.05348 9.86682C9.33348 8.62237 10.3824 7.36015 11.2002 6.08015C12.2668 4.37348 12.8535 2.68459 12.9601 1.01348C11.289 1.12015 9.60015 1.70682 7.89348 2.77348C6.61348 3.59126 5.35126 4.64015 4.10682 5.92015C3.36015 6.73793 2.70237 7.57348 2.13348 8.42682L5.54682 11.8401ZM2.98682 13.9735H0.000149727V10.9868H1.01348V12.9601H2.98682V13.9735ZM9.76015 6.29348C9.51126 6.64904 9.17348 6.88015 8.74682 6.98682C8.35571 7.05793 7.98237 6.98682 7.62682 6.77348C7.30682 6.52459 7.09348 6.20459 6.98682 5.81348C6.91571 5.38682 6.98682 5.01348 7.20015 4.69348C7.44904 4.33793 7.76904 4.12459 8.16015 4.05348C8.58682 3.94682 8.96015 4.01793 9.28015 4.26682C9.63571 4.48015 9.84904 4.80015 9.92015 5.22682C10.0268 5.61793 9.97348 5.97348 9.76015 6.29348Z" fill="#066AFE"/>
+</svg>

package/dist/force-app/main/default/webapplications/feature-graphql/src/assets/icons/star.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70684 0.533125C5.8135 0.319791 5.9735 0.177569 6.18684 0.106458C6.40017 0.0353467 6.6135 0.0353467 6.82684 0.106458C7.04017 0.177569 7.20017 0.319791 7.30684 0.533125L8.8535 3.62646L12.2135 4.10646C12.4624 4.14201 12.6579 4.26646 12.8002 4.47979C12.9424 4.65757 13.0135 4.8709 13.0135 5.11979C13.0135 5.33312 12.9246 5.5109 12.7468 5.65312L10.2935 8.05312L10.8802 11.4665C10.9157 11.6798 10.8624 11.8931 10.7202 12.1065C10.5779 12.2842 10.4002 12.4087 10.1868 12.4798C9.9735 12.5509 9.76017 12.5331 9.54684 12.4265L6.50684 10.8265L3.46684 12.4265C3.2535 12.5331 3.04017 12.5509 2.82684 12.4798C2.6135 12.4087 2.43572 12.2842 2.2935 12.1065C2.15128 11.8931 2.09795 11.6798 2.1335 11.4665L2.72017 8.05312L0.266836 5.65312C0.0890582 5.5109 0.000169277 5.33312 0.000169277 5.11979C0.000169277 4.8709 0.0712804 4.65757 0.213503 4.47979C0.355725 4.26646 0.55128 4.14201 0.800169 4.10646L4.16017 3.62646L5.70684 0.533125ZM6.50684 1.17312L5.06684 4.10646C4.92461 4.3909 4.6935 4.56868 4.3735 4.63979L1.12017 5.06646L3.46684 7.35979C3.71572 7.60868 3.80461 7.87535 3.7335 8.15979L3.20017 11.4131L6.08017 9.86646C6.36461 9.72424 6.64906 9.72424 6.9335 9.86646L9.8135 11.4131L9.28017 8.15979C9.24461 7.87535 9.3335 7.60868 9.54684 7.35979L11.8935 5.06646L8.64017 4.63979C8.32017 4.56868 8.08906 4.3909 7.94684 4.10646L6.50684 1.17312Z" fill="#066AFE"/>
+</svg>