@schandlergarcia/sf-web-components 2.3.17 → 2.4.0

package/brands/engine/app/pages/AccountObjectDetailPage.tsx

@@ -1,361 +0,0 @@
-import { useState } from "react";
-import { useParams, useNavigate } from "react-router";
-import { createDataSDK } from "@salesforce/sdk-data";
-import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
-import GET_ACCOUNT_DETAIL from "../api/account/query/getAccountDetail.graphql?raw";
-import type {
-	GetAccountDetailQuery,
-	GetAccountDetailQueryVariables,
-} from "../api/graphql-operations-types";
-import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
-import { Button } from "../components/ui/button";
-import { Card, CardContent } from "../components/ui/card";
-import {
-	fieldValue,
-	getAddressFieldLines,
-	formatDateTimeField,
-} from "../features/object-search/utils/fieldUtils";
-import {
-	Collapsible,
-	CollapsibleTrigger,
-	CollapsibleContent,
-} from "../components/ui/collapsible";
-import { Separator } from "../components/ui/separator";
-import { Skeleton } from "../components/ui/skeleton";
-import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
-import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
-
-type AccountNode = NonNullable<
-	NonNullable<
-		NonNullable<NonNullable<GetAccountDetailQuery["uiapi"]["query"]["Account"]>["edges"]>[number]
-	>["node"]
->;
-
-async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
-	const data = await createDataSDK();
-	const response = await data.graphql?.<GetAccountDetailQuery, GetAccountDetailQueryVariables>(
-		GET_ACCOUNT_DETAIL,
-		{ id: recordId },
-	);
-
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
-	}
-
-	return response?.data?.uiapi?.query?.Account?.edges?.[0]?.node;
-}
-
-export default function AccountObjectDetail() {
-	const { recordId } = useParams();
-	const navigate = useNavigate();
-
-	const {
-		data: account,
-		loading,
-		error,
-	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
-		key: `account:${recordId}`,
-	});
-
-	return (
-		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<ObjectBreadcrumb
-				listPath="/accounts"
-				listLabel="Accounts"
-				loading={loading}
-				recordName={
-					account
-						? (fieldValue(account.Name) ?? "")
-						: error
-							? "Error"
-							: loading
-								? undefined
-								: "Not Found"
-				}
-			/>
-
-			{/* Loading state */}
-			{loading && <AccountDetailSkeleton />}
-
-			{/* Error state */}
-			{error && <AccountDetailError onBack={() => navigate(-1)} />}
-
-			{/* Not found state */}
-			{!loading && !error && !account && <AccountDetailNotFound onBack={() => navigate(-1)} />}
-
-			{/* Content */}
-			{account && <AccountDetailContent account={account} />}
-		</div>
-	);
-}
-
-function AccountDetailContent({ account }: { account: AccountNode }) {
-	const billingAddress = getAddressFieldLines({
-		street: fieldValue(account.BillingStreet),
-		city: fieldValue(account.BillingCity),
-		state: fieldValue(account.BillingState),
-		postalCode: fieldValue(account.BillingPostalCode),
-		country: fieldValue(account.BillingCountry),
-	});
-
-	const shippingAddress = getAddressFieldLines({
-		street: fieldValue(account.ShippingStreet),
-		city: fieldValue(account.ShippingCity),
-		state: fieldValue(account.ShippingState),
-		postalCode: fieldValue(account.ShippingPostalCode),
-		country: fieldValue(account.ShippingCountry),
-	});
-
-	const dateTimeOptions = { dateStyle: "medium", timeStyle: "short" } as const;
-	const createdDate = formatDateTimeField(
-		fieldValue(account.CreatedDate),
-		undefined,
-		dateTimeOptions,
-	);
-	const lastModifiedDate = formatDateTimeField(
-		fieldValue(account.LastModifiedDate),
-		undefined,
-		dateTimeOptions,
-	);
-
-	return (
-		<>
-			<h1 className="text-2xl font-bold mb-4">Account: {fieldValue(account.Name)}</h1>
-
-			<Card>
-				<CardContent className="space-y-8 pt-6">
-					{/* Top section */}
-					<div>
-						<div className="space-y-4">
-							<FieldRow>
-								<FieldItem label="Account Owner">{fieldValue(account.Owner?.Name)}</FieldItem>
-								<FieldItem label="Phone">
-									<TelephoneField value={fieldValue(account.Phone)} />
-								</FieldItem>
-							</FieldRow>
-							<FieldRow>
-								<FieldItem label="Account Name">{fieldValue(account.Name)}</FieldItem>
-								<FieldItem label="Fax">
-									<TelephoneField value={fieldValue(account.Fax)} />
-								</FieldItem>
-							</FieldRow>
-							<FieldRow>
-								<FieldItem label="Parent Account">{fieldValue(account.Parent?.Name)}</FieldItem>
-								<FieldItem label="Website">{fieldValue(account.Website)}</FieldItem>
-							</FieldRow>
-						</div>
-					</div>
-
-					<Separator />
-
-					{/* Additional Information */}
-					<Section title="Additional Information">
-						<FieldRow>
-							<FieldItem label="Type">{fieldValue(account.Type)}</FieldItem>
-							<FieldItem label="Employees">{fieldValue(account.NumberOfEmployees)}</FieldItem>
-						</FieldRow>
-						<FieldRow>
-							<FieldItem label="Industry">{fieldValue(account.Industry)}</FieldItem>
-							<FieldItem label="Annual Revenue">{fieldValue(account.AnnualRevenue)}</FieldItem>
-						</FieldRow>
-						<FieldItem label="Description">{fieldValue(account.Description)}</FieldItem>
-					</Section>
-
-					<Separator />
-
-					{/* Address Information */}
-					<Section title="Address Information">
-						<FieldRow>
-							<FieldItem label="Billing Address">
-								{billingAddress ? billingAddress.map((line, i) => <div key={i}>{line}</div>) : null}
-							</FieldItem>
-							<FieldItem label="Shipping Address">
-								{shippingAddress
-									? shippingAddress.map((line, i) => <div key={i}>{line}</div>)
-									: null}
-							</FieldItem>
-						</FieldRow>
-					</Section>
-
-					<Separator />
-
-					{/* System Information */}
-					<Section title="System Information">
-						<FieldRow>
-							<FieldItem label="Created By">
-								{[fieldValue(account.CreatedBy?.Name), createdDate].filter(Boolean).join(" ") ||
-									null}
-							</FieldItem>
-							<FieldItem label="Last Modified By">
-								{[fieldValue(account.LastModifiedBy?.Name), lastModifiedDate]
-									.filter(Boolean)
-									.join(" ") || null}
-							</FieldItem>
-						</FieldRow>
-					</Section>
-				</CardContent>
-			</Card>
-		</>
-	);
-}
-
-function TelephoneField({ value }: { value?: string | null }) {
-	if (!value) return null;
-	return (
-		<a href={`tel:${value}`} className="underline">
-			{value}
-		</a>
-	);
-}
-
-function FieldItem({ label, children }: { label: string; children: React.ReactNode }) {
-	return (
-		<div>
-			<dt className="text-sm text-muted-foreground">{label}</dt>
-			<dd className="mt-0.5">{children ?? "—"}</dd>
-		</div>
-	);
-}
-
-function FieldRow({ children }: { children: React.ReactNode }) {
-	return <div className="grid grid-cols-2 gap-x-8 gap-y-4">{children}</div>;
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-	const [open, setOpen] = useState(true);
-	return (
-		<Collapsible open={open} onOpenChange={setOpen}>
-			<CollapsibleTrigger className="flex items-center gap-2 cursor-pointer text-lg font-semibold py-2">
-				{open ? <ChevronDown className="size-5" /> : <ChevronRight className="size-5" />}
-				{title}
-			</CollapsibleTrigger>
-			<CollapsibleContent>
-				<div className="mt-2 space-y-4">{children}</div>
-			</CollapsibleContent>
-		</Collapsible>
-	);
-}
-
-function AccountDetailError({ onBack }: { onBack: () => void }) {
-	return (
-		<>
-			<Alert variant="destructive" role="alert">
-				<AlertCircle />
-				<AlertTitle>
-					<h2>Failed to load account</h2>
-				</AlertTitle>
-				<AlertDescription>
-					Something went wrong while loading this account. Please try again later.
-				</AlertDescription>
-			</Alert>
-			<div className="mt-4 flex gap-3">
-				<Button variant="outline" onClick={onBack}>
-					← Back
-				</Button>
-				<Button variant="outline" onClick={() => window.location.reload()}>
-					Retry
-				</Button>
-			</div>
-		</>
-	);
-}
-
-function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
-	return (
-		<Card>
-			<CardContent className="flex flex-col items-center justify-center py-16 text-center">
-				<FileQuestion className="size-12 text-muted-foreground mb-4" />
-				<h2 className="text-lg font-semibold mb-1">Account not found</h2>
-				<p className="text-sm text-muted-foreground mb-6">
-					The account you're looking for doesn't exist or may have been deleted.
-				</p>
-				<Button variant="outline" onClick={onBack}>
-					← Go back
-				</Button>
-			</CardContent>
-		</Card>
-	);
-}
-
-function AccountDetailSkeleton() {
-	return (
-		<>
-			<Skeleton className="h-8 w-56 mb-4" />
-
-			<Card>
-				<CardContent className="space-y-8 pt-6">
-					{/* Top section: field rows */}
-					<div>
-						<div className="space-y-4">
-							<SkeletonFieldRow />
-							<SkeletonFieldRow />
-							<SkeletonFieldRow />
-						</div>
-					</div>
-
-					<Separator />
-
-					{/* Additional Information */}
-					<SkeletonSection />
-
-					<Separator />
-
-					{/* Address Information */}
-					<div className="space-y-4">
-						<Skeleton className="h-7 w-48 py-2" />
-						<div className="grid grid-cols-2 gap-x-8 gap-y-4">
-							<div>
-								<Skeleton className="h-4 w-28 mb-1.5" />
-								<Skeleton className="h-5 w-44 mb-1" />
-								<Skeleton className="h-5 w-36 mb-1" />
-								<Skeleton className="h-5 w-28" />
-							</div>
-							<div>
-								<Skeleton className="h-4 w-32 mb-1.5" />
-								<Skeleton className="h-5 w-44 mb-1" />
-								<Skeleton className="h-5 w-36 mb-1" />
-								<Skeleton className="h-5 w-28" />
-							</div>
-						</div>
-					</div>
-
-					<Separator />
-
-					{/* System Information */}
-					<div className="space-y-4">
-						<Skeleton className="h-7 w-48 py-2" />
-						<SkeletonFieldRow />
-					</div>
-				</CardContent>
-			</Card>
-		</>
-	);
-}
-
-function SkeletonField() {
-	return (
-		<div>
-			<Skeleton className="h-4 w-24 mb-1.5" />
-			<Skeleton className="h-5 w-40" />
-		</div>
-	);
-}
-
-function SkeletonFieldRow() {
-	return (
-		<div className="grid grid-cols-2 gap-x-8 gap-y-4">
-			<SkeletonField />
-			<SkeletonField />
-		</div>
-	);
-}
-
-function SkeletonSection() {
-	return (
-		<div className="space-y-4">
-			<Skeleton className="h-7 w-48 py-2" />
-			<SkeletonFieldRow />
-			<SkeletonFieldRow />
-		</div>
-	);
-}

package/brands/engine/app/pages/AccountSearch.tsx

@@ -1,305 +0,0 @@
-import { useMemo, useState } from "react";
-import { Link } from "react-router";
-import { AlertCircle, ChevronDown, SearchX } from "lucide-react";
-import {
-	searchAccounts,
-	fetchDistinctIndustries,
-	fetchDistinctTypes,
-} from "../api/account/accountSearchService";
-import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
-import { fieldValue } from "../features/object-search/utils/fieldUtils";
-import { useObjectSearchParams } from "../features/object-search/hooks/useObjectSearchParams";
-import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Button } from "../components/ui/button";
-import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "../components/ui/collapsible";
-import { Skeleton } from "../components/ui/skeleton";
-import {
-	FilterProvider,
-	FilterResetButton,
-} from "../features/object-search/components/FilterContext";
-import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
-import { TextFilter } from "../features/object-search/components/filters/TextFilter";
-import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
-import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
-import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
-import { DateFilter } from "../features/object-search/components/filters/DateFilter";
-import { DateRangeFilter } from "../features/object-search/components/filters/DateRangeFilter";
-import { ActiveFilters } from "../features/object-search/components/ActiveFilters";
-import { SortControl } from "../features/object-search/components/SortControl";
-import type { FilterFieldConfig } from "../features/object-search/utils/filterUtils";
-import type { SortFieldConfig } from "../features/object-search/utils/sortUtils";
-import type { Account_Filter, Account_OrderBy } from "../api/graphql-operations-types";
-import type { AccountSearchResult } from "../api/account/accountSearchService";
-import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
-import PaginationControls from "../features/object-search/components/PaginationControls";
-import type { PaginationConfig } from "../features/object-search/hooks/useObjectSearchParams";
-
-const PAGINATION_CONFIG: PaginationConfig = {
-	defaultPageSize: 6,
-	validPageSizes: [6, 12, 24, 48],
-};
-
-type AccountNode = NonNullable<
-	NonNullable<NonNullable<AccountSearchResult["edges"]>[number]>["node"]
->;
-
-const FILTER_CONFIGS: FilterFieldConfig[] = [
-	{
-		field: "search",
-		label: "Search",
-		type: "search",
-		searchFields: ["Name", "Phone", "Industry"],
-		placeholder: "Search by name, phone, or industry...",
-	},
-	{ field: "Name", label: "Account Name", type: "text", placeholder: "Search by name..." },
-	{ field: "Industry", label: "Industry", type: "picklist" },
-	{ field: "Type", label: "Type", type: "multipicklist" },
-	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
-	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
-	{ field: "LastModifiedDate", label: "Last Modified Date", type: "datetimerange" },
-];
-
-const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
-	{ field: "Name", label: "Name" },
-	{ field: "AnnualRevenue", label: "Annual Revenue" },
-	{ field: "Industry", label: "Industry" },
-	{ field: "CreatedDate", label: "Created Date" },
-];
-
-// -- Component --------------------------------------------------------------
-
-export default function AccountSearch() {
-	const [filtersOpen, setFiltersOpen] = useState(true);
-	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
-		key: "distinctIndustries",
-		ttl: 300_000,
-	});
-	const { data: typeOptions } = useCachedAsyncData(fetchDistinctTypes, [], {
-		key: "distinctTypes",
-		ttl: 300_000,
-	});
-
-	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
-		Account_Filter,
-		Account_OrderBy
-	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
-
-	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
-	const { data, loading, error } = useCachedAsyncData(
-		() =>
-			searchAccounts({
-				where: query.where,
-				orderBy: query.orderBy,
-				first: pagination.pageSize,
-				after: pagination.afterCursor,
-			}),
-		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-		{ key: searchKey },
-	);
-
-	const pageInfo = data?.pageInfo;
-	const totalCount = data?.totalCount;
-	const hasNextPage = pageInfo?.hasNextPage ?? false;
-	const hasPreviousPage = pagination.pageIndex > 0;
-
-	const validAccountNodes = useMemo(
-		() =>
-			(data?.edges ?? []).reduce<AccountNode[]>((acc, edge) => {
-				if (edge?.node) acc.push(edge.node);
-				return acc;
-			}, []),
-		[data?.edges],
-	);
-
-	return (
-		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<ObjectBreadcrumb listPath="/accounts" listLabel="Accounts" />
-
-			<h1 className="text-2xl font-bold mb-4">Search Accounts</h1>
-
-			<div className="flex flex-col lg:flex-row gap-6">
-				{/* Sidebar — Filter Panel */}
-				<aside className="w-full lg:w-80 shrink-0">
-					<FilterProvider
-						filters={filters.active}
-						onFilterChange={filters.set}
-						onFilterRemove={filters.remove}
-						onReset={resetAll}
-					>
-						<Card>
-							<Collapsible open={filtersOpen} onOpenChange={setFiltersOpen}>
-								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-									<CardTitle className="text-base font-semibold">
-										<h2>Filters</h2>
-									</CardTitle>
-									<div className="flex items-center gap-1">
-										<FilterResetButton variant="destructive" size="sm" />
-										<CollapsibleTrigger asChild>
-											<Button variant="ghost" size="icon">
-												<ChevronDown
-													className={`h-4 w-4 transition-transform ${filtersOpen ? "" : "-rotate-90"}`}
-												/>
-												<span className="sr-only">Toggle filters</span>
-											</Button>
-										</CollapsibleTrigger>
-									</div>
-								</CardHeader>
-								<CollapsibleContent>
-									<CardContent className="space-y-1 pt-0">
-										<SearchFilter
-											field="search"
-											label="Search"
-											placeholder="Search by name, phone, or industry..."
-										/>
-										<TextFilter field="Name" label="Account Name" placeholder="Search by name..." />
-										<SelectFilter
-											field="Industry"
-											label="Industry"
-											options={industryOptions ?? []}
-										/>
-										<MultiSelectFilter field="Type" label="Type" options={typeOptions ?? []} />
-										<NumericRangeFilter field="AnnualRevenue" label="Annual Revenue" />
-										<DateFilter field="CreatedDate" label="Created Date" filterType="datetime" />
-										<DateRangeFilter
-											field="LastModifiedDate"
-											label="Last Modified Date"
-											filterType="datetimerange"
-										/>
-									</CardContent>
-								</CollapsibleContent>
-							</Collapsible>
-						</Card>
-					</FilterProvider>
-				</aside>
-
-				{/* Main area — Sort + Results */}
-				<div className="flex-1 min-w-0">
-					{/* Sort control + active filters */}
-					<div className="flex flex-wrap items-center gap-2 mb-4">
-						<SortControl
-							configs={ACCOUNT_SORT_CONFIGS}
-							sort={sort.current}
-							onSortChange={sort.set}
-						/>
-						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
-					</div>
-
-					<div className="min-h-112">
-						{/* Loading state */}
-						{loading && (
-							<>
-								<Skeleton className="h-5 w-30 mb-3" />
-								<div className="divide-y">
-									{Array.from({ length: pagination.pageSize }, (_, i) => (
-										<div key={i} className="flex items-center justify-between py-3">
-											<div className="space-y-2">
-												<Skeleton className="h-5 w-40" />
-												<Skeleton className="h-4 w-28" />
-											</div>
-											<div className="space-y-2 flex flex-col items-end">
-												<Skeleton className="h-4 w-24" />
-												<Skeleton className="h-4 w-20" />
-											</div>
-										</div>
-									))}
-								</div>
-							</>
-						)}
-
-						{/* Error state */}
-						{error && (
-							<>
-								<p className="text-sm text-muted-foreground mb-3">0 accounts found</p>
-								<Alert variant="destructive" role="alert">
-									<AlertCircle />
-									<AlertTitle>Failed to load accounts</AlertTitle>
-									<AlertDescription>
-										Something went wrong while loading accounts. Please try again later.
-									</AlertDescription>
-								</Alert>
-							</>
-						)}
-
-						{/* Results list */}
-						{!loading && !error && validAccountNodes.length > 0 && (
-							<>
-								<p className="text-sm text-muted-foreground mb-3">
-									{totalCount != null && (hasNextPage || hasPreviousPage)
-										? `${totalCount} account${totalCount !== 1 ? "s" : ""} found`
-										: `Showing ${validAccountNodes.length} account${validAccountNodes.length !== 1 ? "s" : ""}`}
-								</p>
-								<AccountResultsList nodes={validAccountNodes} />
-							</>
-						)}
-
-						{/* No results state */}
-						{!loading && !error && validAccountNodes.length === 0 && (
-							<div className="flex flex-col items-center justify-center py-16 text-center">
-								<SearchX className="size-12 text-muted-foreground mb-4" />
-								<h2 className="text-lg font-semibold mb-1">No accounts found</h2>
-								<p className="text-sm text-muted-foreground">
-									Try adjusting your filters or search criteria.
-								</p>
-							</div>
-						)}
-					</div>
-
-					{/* Pagination — always visible, disabled while loading or on error */}
-					<PaginationControls
-						pageIndex={pagination.pageIndex}
-						hasNextPage={hasNextPage}
-						hasPreviousPage={hasPreviousPage}
-						pageSize={pagination.pageSize}
-						pageSizeOptions={PAGINATION_CONFIG.validPageSizes}
-						onNextPage={() => {
-							if (pageInfo?.endCursor) pagination.goToNextPage(pageInfo.endCursor);
-						}}
-						onPreviousPage={pagination.goToPreviousPage}
-						onPageSizeChange={pagination.setPageSize}
-						disabled={loading || !!error}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-// -- Result Components ------------------------------------------------------
-
-function AccountResultsList({ nodes }: { nodes: AccountNode[] }) {
-	return (
-		<ul className="divide-y">
-			{nodes.map((node) => (
-				<AccountResultItem key={node.Id} node={node} />
-			))}
-		</ul>
-	);
-}
-
-function AccountResultItem({ node }: { node: AccountNode }) {
-	return (
-		<li>
-			<Link
-				to={`/accounts/${node.Id}`}
-				className="flex items-center justify-between py-3 px-3 -mx-3 rounded-md transition-colors hover:bg-accent"
-			>
-				<div>
-					<span className="font-medium">{fieldValue(node.Name) ?? "\u2014"}</span>
-					<p className="text-sm text-muted-foreground">
-						{[fieldValue(node.Industry), fieldValue(node.Type)].filter(Boolean).join(" \u00B7 ") ||
-							"\u2014"}
-					</p>
-				</div>
-				<div className="text-right text-sm">
-					<p>{fieldValue(node.Phone) ?? ""}</p>
-					<p className="text-muted-foreground">{fieldValue(node.Owner?.Name) ?? ""}</p>
-				</div>
-			</Link>
-		</li>
-	);
-}

package/brands/engine/app/pages/BlankDashboard.tsx

@@ -1,15 +0,0 @@
-import { RocketLaunchIcon } from "@heroicons/react/24/outline";
-import { EmptyState } from "@/components/library";
-
-export default function BlankDashboard() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-950 transition-colors">
-      <EmptyState
-        size="lg"
-        icon={<RocketLaunchIcon className="h-14 w-14" />}
-        heading="Bespoke App Template"
-        body="Component library loaded and ready to go."
-      />
-    </div>
-  );
-}