@schandlergarcia/sf-web-components 1.9.18 → 1.9.20

package/.a4drules/features/command-center-dashboard-rule.md

@@ -1,13 +1,13 @@
 ---
 paths:
-  - "**/components/pages/*.jsx"
-  - "**/components/pages/*.tsx"
-  - "**/components/pages/CommandCenter.tsx"
+  - "**/pages/*.jsx"
+  - "**/pages/*.tsx"
+  - "**/components/workspace/CommandCenter.tsx"
 ---
 
 # Command Center Dashboard Rules (MANDATORY)
 
-These rules are non-negotiable for all files in `src/components/pages/`.
+These rules are non-negotiable for all dashboard files in `src/pages/` and workspace files in `src/components/workspace/`.
 
 ## Before writing ANY code, load these skills
 
@@ -15,7 +15,7 @@ You MUST load the **command-center-builder** and **component-library** skills be
 
 ## Critical constraints
 
-1. **File extension should be `.tsx`** — TypeScript is preferred for type safety. Use `.jsx` only if types are not available.
+1. **File extension MUST be `.tsx`** — This is a TypeScript project. All React components MUST use `.tsx` extension, never `.jsx`. All type definitions are available from the component library.
 
 2. **Use ONLY library components** from `@/components/library` for cards, charts, tables, lists. Never hand-roll HTML cards (`<div className="bg-white border rounded...">`).
 

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

@@ -15,7 +15,7 @@ These rules apply when building dashboards rendered by `CommandCenter.tsx`. For
 
 **Every time you build a dashboard, you MUST follow these non-negotiable rules. Violations are the #1 cause of rejected dashboards.**
 
-1. **Actually write files to disk.** Use the file-writing tools to create `.jsx` files in `src/components/pages/` and update `CommandCenter.tsx` to import your dashboard. If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
+1. **Actually write files to disk.** Use the file-writing tools to create `.tsx` files (NOT `.jsx`) in `src/pages/` and update `CommandCenter.tsx` to import your dashboard. This is a TypeScript project - all React components MUST use `.tsx` extension. If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
 
 2. **Use ONLY library components** from `@/components/library` for all cards, charts, tables, lists, and feeds. The library has 30+ components — there is no reason to hand-roll HTML. See the component table below.
 
@@ -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.18",
+  "version": "1.9.20",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",