@schandlergarcia/sf-web-components 1.9.19 → 1.9.20

package/.a4drules/skills/command-center-builder/SKILL.md

@@ -140,17 +140,17 @@ Splitting a dashboard into 5 tab "pages" (Overview, Travelers, Spend, Policy, Ev
 
 ## Where Dashboards Live & How to Wire Them
 
-- Dashboard page files: `src/components/pages/` (e.g. `HelloWorld.jsx`, `FleetDashboard.jsx`)
-- File format: `.jsx` (not `.tsx`) — matches the vendored library convention.
-- `CommandCenter.tsx` wraps with `heroui-scope` + `AppThemeProvider` + `DataModeProvider` + `Toast.Provider`. **Never recreate these providers in dashboard pages.**
+- Dashboard page files: `src/pages/` (e.g. `EngineDashboard.tsx`, `FleetDashboard.tsx`)
+- File format: `.tsx` (MUST be TypeScript) — this is a TypeScript project, all React components use `.tsx`.
+- `CommandCenter.tsx` wraps with `AppThemeProvider` + `DataModeProvider` + `Toaster`. **Never recreate these providers in dashboard pages.**
 
 ### Wiring a new dashboard (REQUIRED STEPS)
 
 You must do ALL of these or the dashboard will not render correctly:
 
-**Step 1:** Create the dashboard file in `src/components/pages/`:
-```jsx
-// src/components/pages/MyDashboard.jsx
+**Step 1:** Create the dashboard file in `src/pages/`:
+```tsx
+// src/pages/MyDashboard.tsx
 import React from "react";
 import { MetricCard, ListCard, ChartCard, D3Chart } from "@/components/library";
 
@@ -165,22 +165,20 @@ export default function MyDashboard() {
 
 **Step 2:** Update `CommandCenter.tsx` to import and render it:
 ```tsx
-// src/components/pages/CommandCenter.tsx
+// src/components/workspace/CommandCenter.tsx
 import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
 import DataModeProvider from "@/components/library/data/DataModeProvider";
-import { Toast } from "@heroui/react";
-import MyDashboard from "./MyDashboard";  // ← change this import
+import { Toaster } from "sonner";
+import MyDashboard from "../../pages/MyDashboard";  // ← change this import
 
 export default function CommandCenter() {
   return (
-    <div className="heroui-scope">
-      <AppThemeProvider initialMode="light">
-        <DataModeProvider initialMode="sample">
-          <MyDashboard />                   {/* ← change this */}
-          <Toast.Provider placement="bottom end" />
-        </DataModeProvider>
-      </AppThemeProvider>
-    </div>
+    <AppThemeProvider initialMode="light">
+      <DataModeProvider initialMode="sample">
+        <MyDashboard />                   {/* ← change this */}
+        <Toaster position="bottom-right" />
+      </DataModeProvider>
+    </AppThemeProvider>
   );
 }
 ```
@@ -203,8 +201,8 @@ export default function CommandCenter() {
 The `Home` page renders `CommandCenter`, which renders your dashboard. The Search page moves to `/search`.
 
 **Verify:** After writing all files, confirm:
-1. Your dashboard `.jsx` file exists in `src/components/pages/`
-2. `CommandCenter.tsx` imports your dashboard (not `BlankDashboard`)
+1. Your dashboard `.tsx` file exists in `src/pages/`
+2. `CommandCenter.tsx` (in `src/components/workspace/`) imports your dashboard (not `BlankDashboard`)
 3. `src/routes.tsx` has `Home` as the index route and `Search` at `/search`
 
 ## Page Structure
@@ -589,7 +587,7 @@ The validator (`scripts/validate-dashboard.sh`) automatically checks for:
 - `position: fixed` without `createPortal`
 - shadcn/Lucide imports in command center code
 - Missing `space-y-6` wrappers
-- `.tsx` files where `.jsx` is required
+- `.jsx` files where `.tsx` is required (this is a TypeScript project)
 - Dashboard navigation (`<nav>` elements)
 
 **If the validator reports errors, you MUST fix them ALL — zero errors required.** Do not report the dashboard as complete with any errors. Do not dismiss errors as "acceptable", "justified", or "expected". Every error has a fix — usually by switching to the correct library component. The validator exits with code 1 on errors — treat this like a failing test.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.19",
+  "version": "1.9.20",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",