@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactb2e/_r_/skills/webapp-react/implementation/header-footer.md

@@ -1,132 +0,0 @@
-# Implementation — Header / Footer
-
-### Rules
-
-1. **Edit `appLayout.tsx` only** — header and footer are layout-level concerns. Never add them to individual page files.
-2. **Never modify `routes.tsx` or `app.tsx`** — the router setup must remain intact.
-3. **Create component files in `src/components/layout/`** — the designated location for layout-level components.
-4. **Use the full-height flex column pattern** — wrap layout in `min-h-screen flex flex-col` so footer stays at bottom.
-5. **Use shadcn and Tailwind** — compose from `@/components/ui`; style with Tailwind utility classes and design tokens.
-6. **Use path aliases** — import with `@/components/layout/...` and `@/components/ui`; no deep relative paths.
-7. **Preserve existing content** — if `appLayout.tsx` already has a `<NavigationMenu />` or other shell elements, keep them in place.
-
-### Step 1 — Create the header component (if requested)
-
-Create `src/components/layout/AppHeader.tsx`:
-
-```tsx
-import { cn } from "@/lib/utils";
-
-interface AppHeaderProps {
-  className?: string;
-}
-
-export function AppHeader({ className }: AppHeaderProps) {
-  return (
-    <header
-      className={cn(
-        "w-full border-b bg-background px-4 sm:px-6 lg:px-8 py-4",
-        className,
-      )}
-    >
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
-        <span className="text-lg font-semibold text-foreground">My App</span>
-      </div>
-    </header>
-  );
-}
-```
-
-### Step 2 — Create the footer component (if requested)
-
-Create `src/components/layout/AppFooter.tsx`:
-
-```tsx
-import { cn } from "@/lib/utils";
-
-interface AppFooterProps {
-  className?: string;
-}
-
-export function AppFooter({ className }: AppFooterProps) {
-  return (
-    <footer
-      className={cn(
-        "w-full border-t bg-background px-4 sm:px-6 lg:px-8 py-4",
-        className,
-      )}
-    >
-      <div className="max-w-7xl mx-auto text-center text-sm text-muted-foreground">
-        &copy; {new Date().getFullYear()} My App. All rights reserved.
-      </div>
-    </footer>
-  );
-}
-```
-
-### Step 3 — Edit `appLayout.tsx`
-
-Open `src/appLayout.tsx` — this is the **only file to modify** for layout-level additions. Wrap existing content in a flex column and add header above and footer below `<Outlet />`:
-
-```tsx
-import { Outlet } from "react-router";
-import { AppHeader } from "@/components/layout/AppHeader";
-import { AppFooter } from "@/components/layout/AppFooter";
-// Keep all existing imports unchanged
-
-export default function AppLayout() {
-  return (
-    <div className="min-h-screen flex flex-col bg-background">
-      <AppHeader />
-      {/* Keep any existing NavigationMenu or other shell elements here */}
-      <main className="flex-1">
-        <Outlet />
-      </main>
-      <AppFooter />
-    </div>
-  );
-}
-```
-
-### File Locations — Header / Footer
-
-| Component    | File                                  | Export                         |
-| ------------ | ------------------------------------- | ------------------------------ |
-| Header       | `src/components/layout/AppHeader.tsx` | Named export                   |
-| Footer       | `src/components/layout/AppFooter.tsx` | Named export                   |
-| Layout shell | `src/appLayout.tsx`                   | Default export (edit in place) |
-
-### Why `appLayout.tsx` — Not Pages or Routes
-
-`AppLayout` is the single shell rendered at the root route. Every page is a child rendered via `<Outlet />`. Placing the header and footer here ensures they appear on every page without touching individual pages or the route registry.
-
-```
-AppLayout (appLayout.tsx)
-├── AppHeader          ← renders on every page
-├── NavigationMenu     ← keep if already present
-├── <Outlet />         ← active page renders here
-└── AppFooter          ← renders on every page
-```
-
-### Useful Patterns — Header / Footer
-
-- **Sticky header:** add `sticky top-0 z-50` to the `<header>` element
-- **Separator:** use `<Separator />` from `@/components/ui` instead of `border-b`/`border-t` if a visible divider is preferred
-- **Nav links in header:** use `<Button variant="ghost" asChild>` wrapping a React Router `<Link>`
-- **Icons:** `lucide-react`; add `aria-hidden="true"` on decorative icons
-- **Design tokens:** `bg-background`, `text-foreground`, `text-muted-foreground`, `border`, `bg-primary`
-
-### Mobile hamburger / Menu icon — Must be functional
-
-If the header includes a hamburger or `Menu` icon for mobile:
-
-- **Do not** add a Menu/hamburger icon that does nothing. It must toggle a visible mobile menu.
-- **Required:** (1) State: `const [isOpen, setIsOpen] = useState(false)`. (2) Button: `onClick={() => setIsOpen(!isOpen)}`, `aria-label="Toggle menu"`. (3) Conditional panel: `{isOpen && ( <div>...nav links...</div> )}` with responsive visibility (e.g. `md:hidden`). (4) Close on navigate: each link in the panel should `onClick={() => setIsOpen(false)}`.
-- Implement in `appLayout.tsx` (or the component that owns the header). Use the `Menu` icon from `lucide-react`.
-
-### Confirm — Header / Footer
-
-- Header and footer appear on every page (navigate to at least two routes)
-- Imports use path aliases (`@/components/layout/...`)
-- No inline `style={{}}` — Tailwind only
-- `src/routes.tsx` and `src/app.tsx` are unchanged

package/lib/templates/project/reactb2e/_r_/skills/webapp-react/implementation/page.md

@@ -1,93 +0,0 @@
-# Implementation — Page
-
-### Rules
-
-1. **Edit the component that owns the UI, never output raw HTML** — When editing the home page or any page content, modify the actual `.tsx` file that renders the target. If the target is inside a child component (e.g. `<GlobalSearchInput />` in `Home.tsx`), edit the child's file (e.g. `GlobalSearchInput.tsx`), not the parent. Do not wrap the component with extra elements in the parent; go into the component and change its JSX. Do not paste or generate raw HTML.
-2. **`routes.tsx` is the only route registry** — never add routes in `app.tsx` or inside page files.
-3. **All pages are children of the AppLayout route** — do not create top-level routes that bypass the layout shell.
-4. **Default export per page** — each page file has exactly one default-export component.
-5. **Path aliases in all imports** — use `@/pages/...`, `@/components/...`; no deep relative paths.
-6. **No inline styles** — Tailwind utility classes and design tokens only.
-7. **Catch-all last** — `path: '*'` (NotFound) must always remain the last child in the layout route.
-8. **Never modify `appLayout.tsx`** when adding a page — layout changes are a separate concern.
-
-### Step 1 — Create the page file
-
-Create `src/pages/MyPage.tsx` with a **default export** and the standard page container:
-
-```tsx
-export default function MyPage() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <h1 className="text-3xl font-bold text-foreground">My Page</h1>
-      <p className="mt-4 text-muted-foreground">Page content goes here.</p>
-    </div>
-  );
-}
-```
-
-Use shadcn components from `@/components/ui` for UI elements. All styling via Tailwind — no inline `style={{}}`.
-
-### Step 2 — Register the route in `routes.tsx`
-
-Open `src/routes.tsx`. Import the page and add it inside the layout route's `children` array:
-
-```tsx
-import MyPage from "@/pages/MyPage";
-
-// Inside the layout route's children array (before the catch-all):
-{
-  path: "my-page",
-  element: <MyPage />,
-  handle: { showInNavigation: true, label: "My Page" },
-},
-```
-
-- `path` is a **relative segment** (e.g., `"contacts"`), not an absolute path.
-- Include `handle: { showInNavigation: true, label: "Label" }` only if the page should appear in the navigation menu.
-- The catch-all `path: '*'` must stay **last**.
-
-### Step 3 — Apply an auth guard (if needed)
-
-| Access type                        | Guard                   | Behavior                                |
-| ---------------------------------- | ----------------------- | --------------------------------------- |
-| Public                             | None                    | Direct child of layout                  |
-| Authenticated only                 | `<PrivateRoute>`        | Redirects to login if not authenticated |
-| Unauthenticated only (e.g., login) | `<AuthenticationRoute>` | Redirects away if already authenticated |
-
-Example — private page:
-
-```tsx
-import { PrivateRoute } from "@/components/auth/private-route";
-
-{
-  path: "settings",
-  element: <PrivateRoute><SettingsPage /></PrivateRoute>,
-  handle: { showInNavigation: true, label: "Settings" },
-},
-```
-
-Use `ROUTES.*` constants from `@/utils/authenticationConfig` for auth-related paths — do not hardcode `/login`, `/profile`, etc.
-
-### File Conventions — Page
-
-| Concern           | Location                                               |
-| ----------------- | ------------------------------------------------------ |
-| Page component    | `src/pages/<PageName>.tsx` (default export)            |
-| Route definition  | `src/routes.tsx` only                                  |
-| Layout shell      | `src/appLayout.tsx` — do not modify for page additions |
-| Auth config paths | `ROUTES.*` from `@/utils/authenticationConfig`         |
-
-### State and Data
-
-- **Local state:** `useState`, `useReducer`, `useRef` inside the page component
-- **Shared or complex state:** extract to `src/hooks/` with a `use` prefix (e.g., `useContacts`)
-- **Data fetching:** prefer GraphQL (`executeGraphQL`) or REST utilities in `src/api/`; place shared data logic in `src/hooks/`
-- **Auth context:** `useAuth()` from `@/context/AuthContext` when current user is needed — only valid under `AuthProvider`
-
-### Confirm — Page
-
-- The page renders inside the app shell (header/nav visible)
-- If `showInNavigation: true`, the link appears in the navigation menu
-- No TypeScript errors; no broken imports; no missing exports
-- Imports use path aliases (`@/`, not deep relative paths)

package/lib/templates/project/reactb2e/_r_/skills/webapp-react-data-visualization/SKILL.md

@@ -1,72 +0,0 @@
----
-name: webapp-react-data-visualization
-description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
----
-
-# Data Visualization
-
-## When to Use
-
-Use this skill when:
-- Adding charts (donut, pie, bar, line, area) to a dashboard or analytics page
-- Displaying KPI/metric stat cards with trend indicators
-- Building a dashboard layout with mixed chart types and summary cards
-
----
-
-## Step 1 — Determine the visualization type
-
-Identify what the user needs:
-
-- **Donut / pie chart** — categorical breakdown (e.g. issue types, status distribution)
-- **Bar chart** — comparison across categories or time periods
-- **Line / area chart** — trends over time
-- **Stat card** — single KPI metric with optional trend indicator
-- **Combined dashboard** — stat cards + one or more charts
-
-If unclear, ask:
-
-> "What data should the chart display, and would a donut chart, bar chart, line chart, or stat cards work best?"
-
----
-
-## Step 2 — Install dependencies
-
-All chart types in this skill use **recharts**. Install once from the web app directory:
-
-```bash
-npm install recharts
-```
-
-Recharts is built on D3 and provides declarative React components. No additional CSS is needed.
-
----
-
-## Step 3 — Choose implementation path
-
-Read the corresponding guide:
-
-- **Bar chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
-- **Line / area chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
-- **Donut / pie chart** — read `implementation/donut-chart.md`
-- **Stat card with trend** — read `implementation/stat-card.md`
-- **Dashboard layout** — read `implementation/dashboard-layout.md`
-
----
-
-## Verification
-
-Before completing:
-
-1. Chart renders with correct data and colors.
-2. Chart is responsive (resizes with container).
-3. Legend labels match the data categories.
-4. Stat card trends display correct positive/negative indicators.
-5. Run from the web app directory:
-
-```bash
-cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
-```
-
-- **Lint:** MUST result in 0 errors.
-- **Build:** MUST succeed.

package/lib/templates/project/reactb2e/_r_/skills/webapp-react-data-visualization/implementation/dashboard-layout.md

@@ -1,189 +0,0 @@
-# Dashboard Layout — Implementation Guide
-
-## Anatomy of a dashboard page
-
-A typical dashboard combines stat cards, charts, and data tables:
-
-```
-┌────────────────────────────────────────────────────┐
-│  Search / global action bar                         │
-├──────────┬──────────┬──────────────────────────────┤
-│ Stat 1   │ Stat 2   │ Stat 3                       │
-├──────────┴──────────┴──────┬───────────────────────┤
-│                            │                       │
-│  Data table / list         │  Donut chart          │
-│  (70% width)               │  (30% width)          │
-│                            │                       │
-└────────────────────────────┴───────────────────────┘
-```
-
----
-
-## Layout implementation
-
-```tsx
-import { PageContainer } from "@/components/layout/PageContainer";
-import { StatCard } from "@/components/StatCard";
-import { DonutChart } from "@/components/DonutChart";
-
-export default function Dashboard() {
-  return (
-    <PageContainer>
-      <div className="max-w-7xl mx-auto space-y-6">
-        {/* Search bar */}
-        <div>{/* global search component */}</div>
-
-        {/* Main content: 70/30 split */}
-        <div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6">
-          <div className="space-y-6">
-            {/* Stat cards row */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <StatCard title="Metric A" value={42} />
-              <StatCard title="Metric B" value={18} />
-              <StatCard title="Metric C" value={7} />
-            </div>
-
-            {/* Data table */}
-            <div>{/* table component */}</div>
-          </div>
-
-          {/* Sidebar chart */}
-          <div>
-            <DonutChart title="Distribution" data={chartData} />
-          </div>
-        </div>
-      </div>
-    </PageContainer>
-  );
-}
-```
-
----
-
-## Responsive behavior
-
-| Breakpoint | Layout |
-|------------|--------|
-| Mobile (`< 768px`) | Single column, everything stacked |
-| Tablet (`md`) | Stat cards in 3-col grid, rest stacked |
-| Desktop (`lg`) | 70/30 split for table + chart |
-
-Key Tailwind classes:
-
-```
-grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6
-grid grid-cols-1 md:grid-cols-3 gap-6
-```
-
----
-
-## Loading state
-
-Show a full-page loading state while dashboard data is being fetched:
-
-```tsx
-if (loading) {
-  return (
-    <PageContainer>
-      <div className="flex items-center justify-center min-h-[400px]">
-        <p className="text-muted-foreground">Loading dashboard…</p>
-      </div>
-    </PageContainer>
-  );
-}
-```
-
-Or use a skeleton layout:
-
-```tsx
-if (loading) {
-  return (
-    <PageContainer>
-      <div className="max-w-7xl mx-auto space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="h-28 animate-pulse rounded-xl bg-muted" />
-          ))}
-        </div>
-        <div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6">
-          <div className="h-64 animate-pulse rounded-xl bg-muted" />
-          <div className="h-64 animate-pulse rounded-xl bg-muted" />
-        </div>
-      </div>
-    </PageContainer>
-  );
-}
-```
-
----
-
-## Data fetching pattern
-
-Use `useEffect` with cancellation for dashboard metrics:
-
-```ts
-const [metrics, setMetrics] = useState<Metrics | null>(null);
-const [loading, setLoading] = useState(true);
-
-useEffect(() => {
-  let cancelled = false;
-  (async () => {
-    try {
-      setLoading(true);
-      const data = await fetchDashboardMetrics();
-      if (!cancelled) setMetrics(data);
-    } catch (error) {
-      if (!cancelled) console.error("Error loading metrics:", error);
-    } finally {
-      if (!cancelled) setLoading(false);
-    }
-  })();
-  return () => { cancelled = true; };
-}, []);
-```
-
----
-
-## Combining multiple data sources
-
-Dashboards often aggregate data from several APIs. Load them in parallel:
-
-```ts
-const [metrics, setMetrics] = useState<Metrics | null>(null);
-const [requests, setRequests] = useState<Request[]>([]);
-const [loading, setLoading] = useState(true);
-
-useEffect(() => {
-  let cancelled = false;
-  Promise.all([fetchMetrics(), fetchRecentRequests()])
-    .then(([metricsData, requestsData]) => {
-      if (!cancelled) {
-        setMetrics(metricsData);
-        setRequests(requestsData);
-      }
-    })
-    .catch((err) => {
-      if (!cancelled) console.error(err);
-    })
-    .finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-  return () => { cancelled = true; };
-}, []);
-```
-
----
-
-## PageContainer wrapper
-
-A simple wrapper for consistent page padding:
-
-```tsx
-interface PageContainerProps {
-  children: React.ReactNode;
-}
-
-export function PageContainer({ children }: PageContainerProps) {
-  return <div className="p-6">{children}</div>;
-}
-```

package/lib/templates/project/reactb2e/_r_/skills/webapp-react-data-visualization/implementation/donut-chart.md

@@ -1,181 +0,0 @@
-# Donut / Pie Chart — Implementation Guide
-
-Requires **recharts** (install from the web app directory; see SKILL.md Step 2).
-
----
-
-## Data structure
-
-Charts expect an array of objects with `name`, `value`, and `color`:
-
-```ts
-interface ChartData {
-  name: string;
-  value: number;
-  color: string;
-}
-```
-
----
-
-## Donut chart component
-
-Create at `components/DonutChart.tsx`:
-
-```tsx
-import React from "react";
-import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
-import { Card } from "@/components/ui/card";
-
-interface ChartData {
-  name: string;
-  value: number;
-  color: string;
-}
-
-interface DonutChartProps {
-  title: string;
-  data: ChartData[];
-}
-
-export const DonutChart: React.FC<DonutChartProps> = ({ title, data }) => {
-  const total = data.reduce((sum, item) => sum + item.value, 0);
-  const mainPercentage = total > 0 ? Math.round((data[0]?.value / total) * 100) : 0;
-
-  return (
-    <Card className="p-4 border-gray-200 shadow-sm flex flex-col">
-      <h3 className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
-        {title}
-      </h3>
-
-      <div className="relative flex items-center justify-center">
-        <ResponsiveContainer width="100%" height={300}>
-          <PieChart>
-            <Pie
-              data={data}
-              cx="50%"
-              cy="50%"
-              innerRadius={70}
-              outerRadius={110}
-              paddingAngle={2}
-              dataKey="value"
-            >
-              {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Pie>
-          </PieChart>
-        </ResponsiveContainer>
-
-        {/* Center label */}
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-center">
-            <div className="text-5xl font-bold text-primary">{mainPercentage}%</div>
-          </div>
-        </div>
-      </div>
-
-      {/* Legend */}
-      <div className="mt-6 grid grid-cols-2 gap-3">
-        {data.map((item, index) => (
-          <div key={index} className="flex items-center gap-2">
-            <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
-            <span className="text-sm text-gray-700">{item.name}</span>
-          </div>
-        ))}
-      </div>
-    </Card>
-  );
-};
-```
-
----
-
-## Key Recharts concepts
-
-| Component | Purpose |
-|-----------|---------|
-| `ResponsiveContainer` | Wraps chart to make it fill its parent's width |
-| `PieChart` | Chart container for pie/donut |
-| `Pie` | The data ring; `innerRadius` > 0 makes it a donut |
-| `Cell` | Individual segment; accepts `fill` color |
-| `paddingAngle` | Gap between segments (degrees) |
-
-### Donut vs Pie
-
-| Property | Donut | Pie |
-|----------|-------|-----|
-| `innerRadius` | `> 0` (e.g. `70`) | `0` |
-| Center label | Yes, positioned absolutely | Not typical |
-
----
-
-## Preparing chart data from raw records
-
-Transform API data into the `ChartData[]` format before passing to the chart:
-
-```tsx
-const CATEGORIES = ["Plumbing", "HVAC", "Electrical"] as const;
-const OTHER_LABEL = "Other";
-const COLORS = ["#7C3AED", "#EC4899", "#14B8A6", "#06B6D4"];
-
-const chartData = useMemo(() => {
-  const counts: Record<string, number> = {};
-  CATEGORIES.forEach((c) => (counts[c] = 0));
-  counts[OTHER_LABEL] = 0;
-
-  records.forEach((record) => {
-    const type = record.category;
-    if (CATEGORIES.includes(type as (typeof CATEGORIES)[number])) {
-      counts[type]++;
-    } else {
-      counts[OTHER_LABEL]++;
-    }
-  });
-
-  return [
-    ...CATEGORIES.map((name, i) => ({ name, value: counts[name], color: COLORS[i] })),
-    { name: OTHER_LABEL, value: counts[OTHER_LABEL], color: COLORS[CATEGORIES.length] },
-  ];
-}, [records]);
-```
-
----
-
-## Color palette recommendations
-
-| Use case | Colors |
-|----------|--------|
-| Categorical (4 items) | `#7C3AED` `#EC4899` `#14B8A6` `#06B6D4` |
-| Status (3 items) | `#22C55E` `#F59E0B` `#EF4444` (green/amber/red) |
-| Sequential | Use opacity variants of one hue: `#7C3AED` at 100%, 75%, 50%, 25% |
-
-Keep chart colors consistent with the app's design system. Define them as constants, not inline values.
-
----
-
-## Other chart types
-
-For **bar charts** and **line charts**, use the `AnalyticsChart` component from `feature-react-chart` instead of raw Recharts. See the **`analytics-charts`** skill for usage.
-
----
-
-## Accessibility
-
-- Always include a text legend (not just colors).
-- Chart should be wrapped in a section with a visible heading.
-- For critical data, provide a text summary or table alternative.
-- Use sufficient color contrast between segments.
-- Consider `prefers-reduced-motion` for chart animations.
-
----
-
-## Common mistakes
-
-| Mistake | Fix |
-|---------|-----|
-| Missing `ResponsiveContainer` | Chart won't resize; always wrap in `ResponsiveContainer` |
-| Fixed width/height on `PieChart` | Let `ResponsiveContainer` control sizing |
-| No legend | Add a grid legend below the chart |
-| Inline colors | Extract to constants for consistency |
-| No fallback for empty data | Show "No data" message when `data` is empty |